import {
  Card,
  CardAction,
  CardContent,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import { Button } from "@/components/ui/button";
import { Edit, Plus } from "lucide-react";
import { Cliente } from "@/generated/prisma";
import AddRegistratoreDialog from "./add-registratore";

const ClientCard = ({ cliente }: { cliente: Cliente }) => {
  return (
    <Card className="@container/card">
      <CardHeader>
        <CardTitle className="text-xl font-semibold tabular-nums @[250px]/card:text-2xl">
          {cliente.ragione_sociale}
        </CardTitle>
        <CardAction className="flex items-center gap-4">
          <Tooltip>
            <TooltipTrigger asChild>
              <Button variant="outline">
                <Edit className="size-4" />
              </Button>
            </TooltipTrigger>
            <TooltipContent>
              <p>Modifica dettagli</p>
            </TooltipContent>
          </Tooltip>
          <AddRegistratoreDialog id={cliente.id} />
        </CardAction>
      </CardHeader>
      <CardContent className="flex items-start gap-20 text-md">
        <div className="flex-col items-start gap-1.5 text-md">
          <div className="text-muted-foreground">Partita IVA</div>
          <div className="line-clamp-1 flex gap-2 font-medium">
            {cliente.partita_iva}
          </div>
        </div>
        <div className="flex-col items-start gap-1.5 text-md">
          <div className="text-muted-foreground">Numero di Telefono</div>
          <div className="line-clamp-1 flex gap-2 font-medium">
            {cliente.telefono}
          </div>
        </div>
        <div className="flex-col items-start gap-1.5 text-md">
          <div className="text-muted-foreground">Sede</div>
          <div className="line-clamp-1 flex gap-2 font-medium">
            <a
              className="text-blue-700 italic underline"
              target="blank"
              href={cliente.sede_url}
            >
              {cliente.sede}
            </a>
          </div>
        </div>
        <div className="flex-col items-start gap-1.5 text-md">
          <div className="text-muted-foreground">Contratto</div>
          <div className="line-clamp-1 flex gap-2 font-medium">
            <a
              className="text-blue-700 italic underline"
              target="blank"
              href={cliente.contratto}
            >
              LINK
            </a>
          </div>
        </div>
      </CardContent>
    </Card>
  );
};

export default ClientCard;
