import React from 'react';

import { Link } from '@inertiajs/react';

interface AnnotationHoverCardProps {
  annotation: {
    date: string;
    type: string;
    title: string;
    description: string;
    link: string | null;
    entity_id: number | null;
  };
}

export default function AnnotationHoverCard({
  annotation,
}: AnnotationHoverCardProps) {
  const icon = annotation.type === 'recommendation'
    ? '✓'
    : annotation.type === 'draft'
    ? '✎'
    : annotation.type === 'publish'
    ? '→'
    : '◯';

  return (
    <div className="hidden group-hover:block absolute z-10 bg-popover border border-border rounded-lg p-3 text-sm shadow-lg min-w-[250px]">
      <div className="flex items-start gap-2">
        <span className="font-bold">{icon}</span>
        <div>
          <p className="font-semibold">{annotation.title}</p>
          <p className="text-xs text-muted-foreground">{annotation.date}</p>
          {annotation.description && (
            <p className="text-xs text-muted-foreground mt-1">
              {annotation.description}
            </p>
          )}
          {annotation.link && (
            <Link
              href={annotation.link}
              className="text-xs text-primary hover:underline mt-2 inline-block"
            >
              View details →
            </Link>
          )}
        </div>
      </div>
    </div>
  );
}