import { useState } from 'react';
import { ChevronUp } from 'lucide-react';
import DropdownMenu from './DropdownMenu';

const StatusLabel = ({ status, onChange, showDropdown = true }) => {
  const [dropdownOpen, setDropdownOpen] = useState(false);
  const statusOptions = [
    { value: 1, label: 'Créé' },
    { value: 2, label: 'Envoyé' },
    { value: 3, label: 'En Validation' },
    { value: 4, label: 'A Relancer' },
    { value: 5, label: 'Validé' },
    { value: 6, label: 'Archivé' },
  ];

  const currentStatus = statusOptions.find(option => option.value === status);
  return (
    <>
      {showDropdown ? (
        <DropdownMenu
          buttonContent={
            <>
              {currentStatus ? currentStatus.label : 'Statut inconnu'}
              <ChevronUp size={16} className={`transform transition-transform duration-200 ${dropdownOpen ? 'rotate-180' : 'rotate-90'}`} />
            </>
          }
          items={statusOptions.map(option => ({
            label: option.label,
            onClick: () => onChange(option.value),
          }))}
          buttonClassName={`w-[150px] flex items-center justify-center gap-2 px-2 py-2 rounded-md text-sm text-center font-medium ${
            status === 1 && 'bg-blue-50 text-blue-600' ||
            status === 2 && 'bg-orange-50 text-orange-600' ||
            status === 3 && 'bg-purple-50 text-purple-600' ||
            status === 4 && 'bg-red-50 text-red-600' ||
            status === 5 && 'bg-green-50 text-green-600' ||
            status === 6 && 'bg-red-50 text-red-600'
          }`}
          menuClassName="absolute right-0 mt-2 w-48 bg-white border border-gray-200 rounded-md shadow-lg z-10"
          dropdownOpen={dropdownOpen}
          setDropdownOpen={setDropdownOpen}
        />
      ) : (
        <div className={`w-[150px] flex items-center justify-center gap-2 px-2 py-2 rounded-md text-sm text-center font-medium ${
            status === 1 && 'bg-blue-50 text-blue-600' ||
            status === 2 && 'bg-orange-50 text-orange-600' ||
            status === 3 && 'bg-purple-50 text-purple-600' ||
            status === 4 && 'bg-red-50 text-red-600' ||
            status === 5 && 'bg-green-50 text-green-600' ||
            status === 6 && 'bg-red-50 text-red-600'
        }`}>
          {currentStatus ? currentStatus.label : 'Statut inconnu'}
        </div>
      )}
    </>
  );
};

export default StatusLabel;