"use client";

import { useState } from "react";
import {
  CARD_META,
  CARD_TYPES,
  shouldShowHistoricalAccuracy,
  type CardType,
} from "@/lib/cards";
import { CardContent } from "./cards/CardContent";
import { InfoCard } from "./InfoCard";

export function MovieInsightPanel({
  movieId,
  genres,
}: {
  movieId: number;
  genres: string[];
}) {
  const visibleCards = CARD_TYPES.filter((type) => {
    if (type === "historical_accuracy") {
      return shouldShowHistoricalAccuracy(genres);
    }
    return true;
  });

  const [selected, setSelected] = useState<CardType>(visibleCards[0]);

  return (
    <div className="space-y-6">
      <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
        {visibleCards.map((type) => (
          <InfoCard
            key={type}
            meta={CARD_META[type]}
            selected={selected === type}
            onClick={() => setSelected(type)}
          />
        ))}
      </div>

      <CardContent
        key={`${movieId}-${selected}`}
        movieId={movieId}
        cardType={selected}
      />
    </div>
  );
}