import { memo } from "react";
import { Info } from "lucide-react";
import type { AuthorWithStats } from "../types";
import { StatCard, StatGroup } from "@/components/ui/stat-card";
import { TagInput } from "@/components/ui/tag-input";

interface QuickFactsProps {
  author: AuthorWithStats;
}
export const QuickFacts = memo(function QuickFacts({
  author,
}: QuickFactsProps) {
  if (!author) return null;
  return (
    <section className="max-w-5xl" aria-labelledby="author-quick-facts-heading">
      <h3
        id="author-quick-facts-heading"
        className="text-sm font-medium mb-3 flex items-center gap-2 text-muted-foreground"
      >
        <Info className="h-4 w-4" aria-hidden /> Quick Facts
      </h3>
      <StatGroup cols={4} className="mb-4">
        {(author.country || author.nationality) && (
          <StatCard
            title="Country"
            value={author.country || author.nationality}
            variant="ghost"
            size="sm"
          />
        )}
        {author.birthYear && (
          <StatCard
            title="Born"
            value={`${author.birthYear}${author.location ? `, ${author.location}` : ""}`}
            variant="ghost"
            size="sm"
          />
        )}
        {author.deathYear && (
          <StatCard
            title="Died"
            value={`${author.deathYear}`}
            variant="ghost"
            size="sm"
          />
        )}
        {author.era && (
          <StatCard
            title="Literary Era"
            value={author.era}
            variant="ghost"
            size="sm"
          />
        )}
      </StatGroup>
      {author.genres && author.genres.length > 0 && (
        <div>
          <p className="text-xs text-muted-foreground mb-1">Notable Genres</p>
          <TagInput
            tags={author.genres.map((g) => ({ value: g, label: g }))}
            onTagsChange={() => {}}
            readOnly
            containerClassName="mt-1"
            tagClassName="text-xs"
            emptyPlaceholder="No genres"
          />
        </div>
      )}
    </section>
  );
});

// (Removed legacy Fact component after migrating to StatCard usage)
