import { ChevronRight } from "lucide-react";
import MovieCard from "@/components/nontora/MovieCard";
import { Button } from "@/components/ui/button";

type SimilarTitle = {
	id: string;
	title: string;
	year: number | null;
	poster: string | null;
};

type SimilarTitlesSectionProps = {
	titles: SimilarTitle[];
};

export default function SimilarTitlesSection({
	titles,
}: SimilarTitlesSectionProps) {
	return (
		<div className="space-y-4">
			<div className="flex items-center justify-between">
				<h3 className="font-semibold text-lg">Similar Titles</h3>
				<Button
					variant="ghost"
					size="sm"
					className="text-primary hover:text-primary/80"
				>
					View All <ChevronRight className="ml-1 h-4 w-4" />
				</Button>
			</div>
			<div className="no-scrollbar flex gap-4 overflow-x-auto pb-2">
				{titles.map((similarTitle) => (
					<MovieCard
						key={similarTitle.id}
						id={similarTitle.id}
						imageUrl={similarTitle.poster || undefined}
						title={similarTitle.title}
						description={similarTitle.year ?? "Year unknown"}
					/>
				))}
			</div>
		</div>
	);
}
