"use client";

import { Button } from "@/components/atoms/button";
import { cn } from "@/lib/utils";
import { ArrowLeftIcon } from "@heroicons/react/24/outline";
import type { ReactNode } from "react";

type Alignment = "left" | "center" | "right";

interface CatalogBackLinkProps {
  href: string;
  label?: string;
  align?: Alignment;
  className?: string;
  buttonClassName?: string;
  icon?: ReactNode;
}

const alignmentMap: Record<Alignment, string> = {
  left: "justify-start",
  center: "justify-center",
  right: "justify-end",
};

export function CatalogBackLink({
  href,
  label = "Back",
  align = "left",
  className,
  buttonClassName,
  icon = <ArrowLeftIcon className="w-4 h-4" />,
}: CatalogBackLinkProps) {
  return (
    <div className={cn("mb-6 flex", alignmentMap[align], className)}>
      <Button
        as="a"
        href={href}
        size="sm"
        variant="ghost"
        leftIcon={icon}
        className={cn("text-gray-600 hover:text-gray-900", buttonClassName)}
      >
        {label}
      </Button>
    </div>
  );
}

export type { CatalogBackLinkProps };
