the-bible/frontend/src/components/VersionSelector.tsx

import React from 'react';
import { Search } from 'lucide-react';

interface VersionSelectorProps {
  onVersionSelect: (version: 'esv' | 'nkjv' | 'nlt' | 'csb') => void;
  onSearchClick?: () => void;
}

const VersionSelector: React.FC<VersionSelectorProps> = ({ onVersionSelect, onSearchClick }) => {
  return (
    <div>
      {/* Search Bar */}
      <div className="flex justify-center mb-4">
        <div className="w-full max-w-md relative">
          <input
            type="text"
            placeholder="Search for verses, words, or phrases..."
            className="w-full pl-10 pr-4 py-3 text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            onClick={onSearchClick}
            readOnly
          />
          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400" />
        </div>
      </div>

      {/* Version Selection */}
      <div className="text-center mb-12">
        <h2 className="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-4">
          Choose Your Translation
        </h2>
        <p className="text-lg text-gray-600 dark:text-gray-400">
          Select a Bible translation to begin your study
        </p>
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 max-w-4xl mx-auto">
        {/* ESV Card */}
        <div
          onClick={() => onVersionSelect('esv')}
          className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-md hover:shadow-lg transition-all duration-200 cursor-pointer transform hover:-translate-y-1"
        >
          <div className="p-6">
            <div className="flex flex-col items-center text-center">
              <div className="w-16 h-16 mb-3 flex items-center justify-center">
                <img src="/logos/esv-logo.png" alt="ESV Logo" className="max-w-full max-h-full" />
              </div>
              <h3 className="text-xl font-bold text-gray-900 dark:text-gray-100 mb-2">
                ESV
              </h3>
              <p className="text-gray-600 dark:text-gray-400 mb-3">
                English Standard Version
              </p>
              <p className="text-sm text-gray-500 dark:text-gray-400">
                A literal translation that balances clarity and dignity
              </p>
            </div>
          </div>
        </div>

        {/* NKJV Card */}
        <div
          onClick={() => onVersionSelect('nkjv')}
          className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-md hover:shadow-lg transition-all duration-200 cursor-pointer transform hover:-translate-y-1"
        >
          <div className="p-6">
            <div className="flex flex-col items-center text-center">
              <div className="w-16 h-16 mb-3 flex items-center justify-center">
                <img src="/logos/nkjv-logo.png" alt="NKJV Logo" className="max-w-full max-h-full" />
              </div>
              <h3 className="text-xl font-bold text-gray-900 dark:text-gray-100 mb-2">
                NKJV
              </h3>
              <p className="text-gray-600 dark:text-gray-400 mb-3">
                New King James Version
              </p>
              <p className="text-sm text-gray-500 dark:text-gray-400">
                Updated language while preserving the majesty of the original
              </p>
            </div>
          </div>
        </div>

        {/* NLT Card */}
        <div
          onClick={() => onVersionSelect('nlt')}
          className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-md hover:shadow-lg transition-all duration-200 cursor-pointer transform hover:-translate-y-1"
        >
          <div className="p-6">
            <div className="flex flex-col items-center text-center">
              <div className="w-16 h-16 mb-3 flex items-center justify-center">
                <img src="/logos/nlt-logo.png" alt="NLT Logo" className="max-w-full max-h-full" />
              </div>
              <h3 className="text-xl font-bold text-gray-900 dark:text-gray-100 mb-2">
                NLT
              </h3>
              <p className="text-gray-600 dark:text-gray-400 mb-3">
                New Living Translation
              </p>
              <p className="text-sm text-gray-500 dark:text-gray-400">
                Clear and accurate translation for modern readers
              </p>
            </div>
          </div>
        </div>

        {/* CSB Card */}
        <div
          onClick={() => onVersionSelect('csb')}
          className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-md hover:shadow-lg transition-all duration-200 cursor-pointer transform hover:-translate-y-1"
        >
          <div className="p-6">
            <div className="flex flex-col items-center text-center">
              <div className="w-16 h-16 mb-3 flex items-center justify-center">
                <img src="/logos/csb-logo.png" alt="CSB Logo" className="max-w-full max-h-full" />
              </div>
              <h3 className="text-xl font-bold text-gray-900 dark:text-gray-100 mb-2">
                CSB
              </h3>
              <p className="text-gray-600 dark:text-gray-400 mb-3">
                Christian Standard Bible
              </p>
              <p className="text-sm text-gray-500 dark:text-gray-400">
                Faithful to the original languages with modern clarity
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default VersionSelector;