/**
 * AuthorGenres - Composable genres component for authors
 */

import type React from "react";
import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils";
import type { AuthorWithStats } from "../types";

interface AuthorGenresProps extends React.HTMLAttributes<HTMLDivElement> {
  author: Pick<AuthorWithStats, "genres">;
  maxGenres?: number;
  variant?: "default" | "outline" | "secondary";
  size?: "sm" | "default" | "lg";
}

export function AuthorGenres({
  author,
  maxGenres = 3,
  variant = "default",
  size = "default",
  className,
  ...props
}: AuthorGenresProps) {
  if (!author.genres || author.genres.length === 0) return null;

  const displayGenres = author.genres.slice(0, maxGenres);
  const remainingCount = author.genres.length - maxGenres;

  return (
    <div className={cn("flex flex-wrap gap-1", className)} {...props}>
      {displayGenres.map((genre) => (
        <Badge
          key={genre}
          variant={
            variant === "default"
              ? "default"
              : variant === "outline"
                ? "outline"
                : "secondary"
          }
          className={cn(
            size === "sm" && "text-xs px-2 py-0.5",
            size === "lg" && "text-sm px-3 py-1"
          )}
        >
          {genre}
        </Badge>
      ))}
      {remainingCount > 0 && (
        <Badge
          variant="outline"
          className={cn(
            size === "sm" && "text-xs px-2 py-0.5",
            size === "lg" && "text-sm px-3 py-1"
          )}
        >
          +{remainingCount}
        </Badge>
      )}
    </div>
  );
}

export type { AuthorGenresProps };
