first commit

components/MovieInsightPanel.tsx

@@ -0,0 +1,49 @@
+"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>
+  );
+}