import React from 'react';
import { useNavigate } from 'react-router-dom';
import { Button, type ButtonProps } from '@/components/ui/Button';
import { cn } from '@/utils/utils';

export interface BackButtonProps extends Omit<ButtonProps, 'onClick'> {
  /** Route explicite (ex: "/support"). Si omis, fait un retour arrière dans l'historique (-1) */
  to?: string;
  /** Texte par défaut du bouton */
  label?: string;
  /** Fonction personnalisée au clic */
  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
}

export const BackButton: React.FC<BackButtonProps> = ({
  to,
  label = "Retour",
  onClick,
  variant = "ghost", // Style par défaut : ultra discret sur la surface Neumorphic
  size = "sm",
  children,
  className,
  ...props
}) => {
  const navigate = useNavigate();

  // Logique du clic (priorité : onClick perso > destination 'to' > retour historique)
  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
    if (onClick) {
      onClick(e);
    } else if (to) {
      navigate(to);
    } else {
      navigate(-1);
    }
  };

  return (
    <Button
      variant={variant}
      size={size}
      onClick={handleClick}
      leftIcon={
        <svg 
          className="w-4 h-4 transition-transform duration-200 group-hover:-translate-x-1" 
          fill="none" 
          stroke="currentColor" 
          viewBox="0 0 24 24"
        >
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 19l-7-7 7-7" />
        </svg>
      }
      className={cn("group", className)}
      {...props}
    >
      {children || label}
    </Button>
  );
};

export default BackButton;