frontend/src/components/shared/CompactMetadataCard.tsx

import React from "react";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import { LucideIcon } from "lucide-react";

export interface MetadataCardConfig {
  id: string;
  label: string;
  value: string | number;
  icon: LucideIcon;
  color: string;
  tooltip?: string;
}

interface CompactMetadataCardProps {
  config: MetadataCardConfig;
  onClick?: () => void;
}

export function CompactMetadataCard({
  config,
  onClick,
}: CompactMetadataCardProps) {
  const { label, value, icon: Icon, color, tooltip } = config;

  return (
    <TooltipProvider delayDuration={300}>
      <Tooltip>
        <TooltipTrigger asChild>
          <div
            className={`
              bg-card border border-border rounded-lg px-3 py-2 
              flex items-center gap-2 min-w-0 cursor-default
              hover:bg-muted/50 transition-colors
              ${onClick ? "cursor-pointer" : ""}
            `}
            onClick={onClick}
          >
            <Icon className={`h-4 w-4 flex-shrink-0 ${color}`} />
            <div className="flex flex-col min-w-0">
              <span className="text-xs font-medium text-muted-foreground truncate">
                {label}
              </span>
              <span className="text-sm font-semibold truncate">
                {typeof value === "number" && value > 999
                  ? value.toLocaleString()
                  : value}
              </span>
            </div>
          </div>
        </TooltipTrigger>
        <TooltipContent>
          <div className="text-center">
            <p className="font-medium">{label}</p>
            {tooltip && (
              <p className="text-xs text-muted-foreground mt-1">{tooltip}</p>
            )}
          </div>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}

export function CompactMetadataCardAdd({ onClick }: { onClick: () => void }) {
  return (
    <TooltipProvider delayDuration={300}>
      <Tooltip>
        <TooltipTrigger asChild>
          <div
            className="
              bg-card border border-dashed border-border rounded-lg px-3 py-2 
              flex items-center justify-center gap-2 min-w-[80px] h-[52px]
              cursor-pointer hover:bg-muted/50 transition-colors
              text-muted-foreground hover:text-foreground
            "
            onClick={onClick}
          >
            <span className="text-lg">+</span>
          </div>
        </TooltipTrigger>
        <TooltipContent>
          <p>Add metadata card</p>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}