import { ArrowLeft } from "lucide-react";
import { Link } from "react-router";

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

export const BackLink = ({ to, children }: BackLinkProps) => (
  <Link
    to={to}
    className="group mb-6 inline-flex items-center gap-1.5 text-xs font-medium uppercase tracking-[0.18em] text-zinc-500 transition-colors hover:text-zinc-300"
  >
    <ArrowLeft className="h-3 w-3 transition-transform duration-200 group-hover:-translate-x-0.5" aria-hidden="true" />
    {children}
  </Link>
);