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

import React from 'react';
import { Book, Users } from 'lucide-react';

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

const VersionSelector: React.FC<VersionSelectorProps> = ({ onVersionSelect }) => {
  return (
    <div>
      {/* Header */}
      <header className="bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-center items-center h-16">
            <div className="flex items-center space-x-4">
              <Book className="h-8 w-8 text-blue-600" />
              <h1 className="text-xl sm:text-2xl font-bold text-gray-900 dark:text-gray-100">
                The Bible
              </h1>
            </div>
          </div>
        </div>
      </header>

      {/* Version Selection */}
      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
        <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 md:grid-cols-2 gap-8 max-w-2xl 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-8">
              <div className="flex flex-col items-center text-center">
                <div className="w-20 h-20 mb-4 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-4">
                  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-8">
              <div className="flex flex-col items-center text-center">
                <div className="w-20 h-20 mb-4 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-4">
                  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>
        </div>

        <div className="text-center mt-12">
          <p className="text-sm text-gray-500 dark:text-gray-400">
            Both translations include the complete Old and New Testaments, with search and bookmarking features.
          </p>
        </div>
      </div>
    </div>
  );
};

export default VersionSelector;