front/src/pages/LanguageSelection.tsx

import React from 'react';
import { useNavigate } from 'react-router-dom';

const LanguageSelection = () => {
  const navigate = useNavigate();

  const languages = [
    {
      name: 'Bulgarian',
      nativeName: 'Говоря български',
      flag: 'https://images.unsplash.com/photo-1607427293702-036707fc51c0?auto=format&fit=crop&w=64&h=64',
    },
    {
      name: 'Arabic',
      nativeName: 'أتحدث العربية',
      flag: 'https://images.unsplash.com/photo-1607427293702-036707fc51c0?auto=format&fit=crop&w=64&h=64',
    },
    {
      name: 'Spanish',
      nativeName: 'Hablo español',
      flag: 'https://images.unsplash.com/photo-1607427293702-036707fc51c0?auto=format&fit=crop&w=64&h=64',
    },
    {
      name: 'Romanian',
      nativeName: 'Vorbesc română',
      flag: 'https://images.unsplash.com/photo-1607427293702-036707fc51c0?auto=format&fit=crop&w=64&h=64',
    },
  ];

  return (
    <div className="container mx-auto px-4 py-8">
      <div className="max-w-2xl mx-auto">
        <div className="flex justify-center mb-8">
          <img
            src="https://images.unsplash.com/photo-1607427293702-036707fc51c0?auto=format&fit=crop&w=200&h=100"
            alt="MSA Logo"
            className="h-24"
          />
        </div>
        
        <div className="grid grid-cols-2 gap-4">
          {languages.map((lang) => (
            <button
              key={lang.name}
              onClick={() => navigate('/arabic')}
              className="bg-white rounded-lg shadow-md p-4 flex items-center space-x-4 hover:shadow-lg transition-shadow"
            >
              <img
                src={lang.flag}
                alt={`${lang.name} flag`}
                className="w-12 h-12 rounded-full"
              />
              <div className="text-left">
                <p className="text-sm text-gray-600">Je parle</p>
                <p className="text-lg font-semibold">{lang.nativeName}</p>
              </div>
            </button>
          ))}
        </div>
      </div>
    </div>
  );
};

export default LanguageSelection;