n3wt-school/Front-End/src/components/StatusLabel.js

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

const StatusLabel = ({ status, onChange, showDropdown = true, parent }) => {
  const [dropdownOpen, setDropdownOpen] = useState(false);

  // Définir les options de statut en fonction de la prop `parent`
  const statusOptions = parent
    ? [
        { value: 2, label: 'Nouveau' },
        { value: 3, label: 'En validation' },
        { value: 7, label: 'SEPA reçu' },
        { value: 8, label: 'En validation' },
      ]
    : [
        { value: 1, label: 'A envoyer' },
        { value: 2, label: 'En attente' },
        { value: 3, label: 'Signé' },
        { value: 4, label: 'A Relancer' },
        { value: 5, label: 'Validé' },
        { value: 6, label: 'Archivé' },
        { value: 7, label: 'En attente SEPA' },
        { value: 8, label: 'SEPA à envoyer' },
      ];

  const currentStatus = statusOptions.find((option) => option.value === status);

  // Définir les couleurs en fonction du statut
  const getStatusClass = () => {
    if (parent) {
      return (
        (status === 2 && 'bg-orange-50 text-orange-600') ||
        ((status === 3 || status === 8) && 'bg-purple-50 text-purple-600') ||
        (status === 7 && 'bg-yellow-50 text-yellow-600')
      );
    }
    return (
      (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') ||
      (status === 7 && 'bg-yellow-50 text-yellow-600') ||
      (status === 8 && 'bg-cyan-50 text-cyan-600')
    );
  };

  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 ${getStatusClass()}`}
          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 ${getStatusClass()}`}
        >
          {currentStatus ? currentStatus.label : 'Statut inconnu'}
        </div>
      )}
    </>
  );
};

export default StatusLabel;