import Link from "next/link";

import { ArrowLeft, Pencil } from "lucide-react";

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { Button } from "@/components/ui/button";

type OrderBlotterHistoryHeaderProps = {
  id: number;
  basePath?: string;
  listPath?: string;
  listLabel?: string;
  showBreadcrumb?: boolean;
};

export function OrderBlotterHistoryHeader({
  id,
  basePath = "/dashboard/order-blotter",
  listPath = "/dashboard/order-blotter",
  listLabel = "Back to list",
  showBreadcrumb = true,
}: OrderBlotterHistoryHeaderProps) {
  const editHref = `${basePath}/${id}?action=update`;

  return (
    <div className="flex flex-col gap-3">
      {showBreadcrumb ? (
        <Breadcrumb className="text-xs">
          <BreadcrumbList>
            <BreadcrumbItem>
              <BreadcrumbLink asChild>
                <Link href="/dashboard">Dashboard</Link>
              </BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
              <BreadcrumbLink asChild>
                <Link href={listPath}>Order Blotter</Link>
              </BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
              <BreadcrumbLink asChild>
                <Link href={editHref}>Edit #{id}</Link>
              </BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
              <BreadcrumbPage>History</BreadcrumbPage>
            </BreadcrumbItem>
          </BreadcrumbList>
        </Breadcrumb>
      ) : null}

      <div className="flex flex-col gap-2 border-b pb-3 sm:flex-row sm:items-center sm:justify-between">
        <h1 className="font-semibold text-base tracking-tight">Change history #{id}</h1>
        <div className="flex flex-wrap items-center gap-2">
          <Button size="sm" className="gap-1.5" asChild>
            <Link href={editHref}>
              <Pencil className="size-4" />
              Edit
            </Link>
          </Button>
          <Button variant="outline" size="sm" className="gap-1.5" asChild>
            <Link href={listPath}>
              <ArrowLeft className="size-4" />
              {listLabel}
            </Link>
          </Button>
        </div>
      </div>
    </div>
  );
}