import { Card, CardContent } from "@/components/ui/card";
import type { LibraryCount } from "../types";

interface Props {
	libraries: LibraryCount[];
}

/**
 * Two-column overview of movie and TV libraries on a responsive CSS grid
 * (`grid grid-cols-1 md:grid-cols-2 gap-4`). Same exported props as the MUI
 * version; the per-library counts render verbatim.
 */
export function LibraryOverview({ libraries }: Props) {
	const movieLibs = libraries.filter((l) => l.type === "movies");
	const tvLibs = libraries.filter((l) => l.type === "tvshows");

	return (
		<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
			<div className="flex flex-col gap-4">
				<h4 className="text-sm font-semibold text-muted-foreground">
					Movie libraries
				</h4>
				<div className="flex flex-col gap-4">
					{movieLibs.map((lib) => (
						<Card key={lib.library}>
							<CardContent className="flex flex-col gap-1">
								<span className="text-base font-semibold">{lib.library}</span>
								<span className="text-sm text-muted-foreground">
									Total: {lib.total.toLocaleString()} | Movies:{" "}
									{lib.movies.toLocaleString()}
								</span>
							</CardContent>
						</Card>
					))}
				</div>
			</div>
			<div className="flex flex-col gap-4">
				<h4 className="text-sm font-semibold text-muted-foreground">
					TV libraries
				</h4>
				<div className="flex flex-col gap-4">
					{tvLibs.map((lib) => (
						<Card key={lib.library}>
							<CardContent className="flex flex-col gap-1">
								<span className="text-base font-semibold">{lib.library}</span>
								<span className="text-sm text-muted-foreground">
									Total: {lib.total.toLocaleString()} | Series:{" "}
									{lib.series.toLocaleString()}
								</span>
							</CardContent>
						</Card>
					))}
				</div>
			</div>
		</div>
	);
}