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

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

  const languages = [
    {
      name: 'Bulgarian',
      nativeName: 'Говоря български',
      flag: 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Flag_of_Bulgaria.svg/langfr-2560px-Flag_of_Bulgaria.svg.png',
    },
    {
      name: 'Arabic',
      nativeName: 'أتحدث العربية',
      flag: 'https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/Flag_of_Morocco.svg/langfr-1920px-Flag_of_Morocco.svg.png',
    },
    {
      name: 'Spanish',
      nativeName: 'Hablo español',
      flag: 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Flag_of_Spain.svg/langfr-1920px-Flag_of_Spain.svg.png',
    },
    {
      name: 'Romanian',
      nativeName: 'Vorbesc română',
      flag: 'https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/Flag_of_Romania.svg/langfr-1920px-Flag_of_Romania.svg.png',
    },
  ];

  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://upload.wikimedia.org/wikipedia/fr/1/18/Mutualite_sociale_agricole_logo.svg"
            alt="MSA Logo"
            className="h-16"
          />
        </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 shadow-md border-solid"
              />
              <div className="text-left">
                
                <p className="text-lg font-semibold">{lang.nativeName}</p>
              </div>
            </button>
          ))}
        </div>
      </div>
    </div>
  );
};

export default LanguageSelection;