import { Button, ButtonProps } from "@/ui";
import { ChevronLeft } from "lucide-react";
import { To, useNavigate } from "react-router-dom";
import { CustomButton } from "../Buttons/CustomButton";

export interface BackHistoryButtonProps extends ButtonProps {
  label?: string;
  url?: To;
}

export const BackHistoryButton = ({
  label = "Volver atrás",
  size,
  url = undefined,
  ...props
}: BackHistoryButtonProps): JSX.Element => {
  const navigate = useNavigate();

  return (
    <CustomButton
      type='button'
      label={label}
      icon={ChevronLeft}
      variant='ghost'
      onClick={() => {
        url ? navigate(url) : navigate(-1);
      }}
      {...props}
    />
  );

  return (
    <Button
      variant='ghost'
      onClick={() => {
        url ? navigate(url) : navigate(-1);
      }}
      size={size}
      {...props}
    >
      <ChevronLeft className='w-4 h-4' />
      <span className={size === "icon" ? "sr-only" : "ml-2"}>{label}</span>
    </Button>
  );
};