first commit

components/cards/CardContent.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import type { CardType } from "@/lib/cards";
+import { HistoricalAccuracyView } from "./HistoricalAccuracy";
+import { InternationalRatingsView } from "./InternationalRatings";
+import { ProductionFactsView } from "./ProductionFacts";
+import { RatingExplainedView } from "./RatingExplained";
+import { SensitivityGuideView } from "./SensitivityGuide";
+import { SkipGuideView } from "./SkipGuide";
+
+interface CardContentProps {
+  movieId: number;
+  cardType: CardType;
+}
+
+export function CardContent({ movieId, cardType }: CardContentProps) {
+  const [data, setData] = useState<unknown>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [retryToken, setRetryToken] = useState(0);
+
+  useEffect(() => {
+    const controller = new AbortController();
+    let cancelled = false;
+
+    async function fetchCard() {
+      try {
+        const response = await fetch(
+          `/api/cards/${cardType}?movieId=${movieId}`,
+          { signal: controller.signal },
+        );
+        const payload = await response.json();
+
+        if (!response.ok) {
+          throw new Error(payload.error ?? "Something went wrong. Try again.");
+        }
+
+        if (!cancelled) {
+          setData(payload.data);
+          setError(null);
+        }
+      } catch (err) {
+        if ((err as Error).name === "AbortError" || cancelled) {
+          return;
+        }
+        setError(
+          err instanceof Error ? err.message : "Something went wrong. Try again.",
+        );
+        setData(null);
+      } finally {
+        if (!cancelled) {
+          setLoading(false);
+        }
+      }
+    }
+
+    void fetchCard();
+
+    return () => {
+      cancelled = true;
+      controller.abort();
+    };
+  }, [cardType, movieId, retryToken]);
+
+  if (loading) {
+    return (
+      <div className="space-y-3 rounded-2xl border border-white/10 bg-white/[0.03] p-6">
+        <div className="h-4 w-40 animate-pulse rounded bg-white/10" />
+        <div className="h-4 w-full animate-pulse rounded bg-white/10" />
+        <div className="h-4 w-5/6 animate-pulse rounded bg-white/10" />
+        <p className="text-sm text-slate-400">Generating insight...</p>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="rounded-2xl border border-red-400/20 bg-red-400/5 p-6">
+        <p className="text-red-200">{error}</p>
+        <button
+          type="button"
+          onClick={() => {
+            setLoading(true);
+            setRetryToken((token) => token + 1);
+          }}
+          className="mt-4 rounded-lg border border-white/10 px-4 py-2 text-sm text-white transition hover:bg-white/5"
+        >
+          Try again
+        </button>
+      </div>
+    );
+  }
+
+  if (!data) {
+    return null;
+  }
+
+  switch (cardType) {
+    case "rating_explained":
+      return <RatingExplainedView data={data} />;
+    case "skip_guide":
+      return <SkipGuideView data={data} />;
+    case "sensitivity_guide":
+      return <SensitivityGuideView data={data} />;
+    case "international_ratings":
+      return <InternationalRatingsView data={data} />;
+    case "production_facts":
+      return <ProductionFactsView data={data} />;
+    case "historical_accuracy":
+      return <HistoricalAccuracyView data={data} />;
+    default:
+      return null;
+  }
+}