"use client";

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

export function MovieInsightPanel({ movieId }: { movieId: number }) {
  const [selected, setSelected] = useState<CardType>(CARD_TYPES[0]);

  return (
    <div className="space-y-6">
      <div className="grid gap-4 sm:grid-cols-2">
        {CARD_TYPES.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>
  );
}