import { Link } from 'react-router-dom';
import { ArrowLeft } from 'lucide-react';
import type { ReactNode } from 'react';

interface BackLinkProps {
  to: string;
  children: ReactNode;
}

export function BackLink({ to, children }: BackLinkProps): JSX.Element {
  return (
    <Link to={to} className="inline-flex items-center gap-xxs caption-md text-graphite hover:text-primary">
      <ArrowLeft size={14} aria-hidden />
      {children}
    </Link>
  );
}