import { ArrowLeft } from 'lucide-react';
import { useLocation, useNavigate } from 'react-router-dom';

type BackButtonProps = {
  fallbackTo: string;
  label?: string;
};

const BackButton = ({ fallbackTo, label = 'Voltar' }: BackButtonProps) => {
  const navigate = useNavigate();
  const location = useLocation();

  const handleClick = () => {
    if (location.key !== 'default' && window.history.length > 1) {
      navigate(-1);
      return;
    }

    navigate(fallbackTo, { replace: true });
  };

  return (
    <button
      type="button"
      onClick={handleClick}
      className="inline-flex w-fit cursor-pointer items-center text-sm font-bold text-zinc-400 dark:text-dark-muted transition-colors hover:text-zinc-900 dark:hover:text-dark-text"
    >
      <ArrowLeft className="mr-2 h-4 w-4" />
      {label}
    </button>
  );
};

export default BackButton;