import { FileText } from "lucide-react";
import type { Citation } from "@duoc-thu/shared-types";
import { badgeVariants } from "./primitives/badge";
import { cn } from "./lib/utils";

export interface CitationCardProps {
  citation: Citation;
  onClick?: () => void;
}

export function CitationCard({ citation, onClick }: CitationCardProps) {
  const [fromPage, toPage] = citation.sourcePageRange;
  const className = cn(
    badgeVariants({ variant: "outline" }),
    "mr-1.5 mt-1 border-primary/20 bg-primary/5 font-normal text-foreground",
    onClick && "cursor-pointer transition-colors hover:bg-primary/10"
  );
  const content = (
    <>
      <FileText className="h-3.5 w-3.5 text-primary" aria-hidden="true" />
      <span className="font-bold text-primary">{citation.drugName}</span>
      <span className="text-muted-foreground">{citation.sectionType}</span>
      <span className="text-muted-foreground">
        tr. {fromPage}
        {toPage !== fromPage ? `–${toPage}` : ""}
      </span>
    </>
  );

  if (onClick) {
    return (
      <button type="button" className={className} onClick={onClick}>
        {content}
      </button>
    );
  }

  return <div className={className}>{content}</div>;
}