import React from 'react';
import { Plus } from 'lucide-react';

// Thèmes couleur selon le type
const THEME = {
  groupe: {
    bg: 'bg-blue-50',
    border: 'border-blue-200',
    iconBg: 'bg-blue-100',
    icon: 'text-blue-600',
    title: 'text-blue-800',
    desc: 'text-blue-600',
    button: 'bg-blue-500 text-white hover:bg-blue-600',
    buttonText: 'text-blue-700',
    buttonHover: 'hover:bg-blue-100',
  },
  formulaire: {
    bg: 'bg-emerald-50',
    border: 'border-emerald-200',
    iconBg: 'bg-emerald-100',
    icon: 'text-emerald-600',
    title: 'text-emerald-800',
    desc: 'text-emerald-600',
    button: 'bg-emerald-500 text-white hover:bg-emerald-600',
    buttonText: 'text-emerald-700',
    buttonHover: 'hover:bg-emerald-100',
  },
  parent: {
    bg: 'bg-orange-50',
    border: 'border-orange-200',
    iconBg: 'bg-orange-100',
    icon: 'text-orange-500',
    title: 'text-orange-700',
    desc: 'text-orange-600',
    button: 'bg-orange-500 text-white hover:bg-orange-600',
    buttonText: 'text-orange-700',
    buttonHover: 'hover:bg-orange-100',
  },
};

const SectionHeaderDocument = ({
  icon: Icon,
  title,
  description,
  button = false,
  buttonOpeningModal = false,
  onClick = null,
  className = '',
  type = 'groupe', // 'groupe', 'formulaire', 'parent'
}) => {
  const theme = THEME[type] || THEME.groupe;

  return (
    <div className={`flex items-center justify-between border-b ${theme.border} ${theme.bg} px-2 py-3 mb-4 ${className}`}>
      <div className="flex items-center gap-3">
        {Icon && (
          <span className={`${theme.iconBg} p-2 rounded-md flex items-center justify-center`}>
            <Icon className={`w-6 h-6 ${theme.icon}`} />
          </span>
        )}
        <div>
          <h2 className={`text-lg font-semibold ${theme.title}`}>{title}</h2>
          {description && (
            <p className={`text-xs ${theme.desc}`}>{description}</p>
          )}
        </div>
      </div>
      {button && onClick && (
        <button
          onClick={onClick}
          className={
            buttonOpeningModal
              ? `flex items-center ${theme.button} px-3 py-1 rounded-md shadow transition`
              : `flex items-center ${theme.buttonText} ${theme.buttonHover} px-2 py-1 rounded-md`
          }
        >
          <Plus className="w-5 h-5 mr-1" />
          <span className="text-sm font-medium">Ajouter</span>
        </button>
      )}
    </div>
  );
};

export default SectionHeaderDocument;