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

type CastMember = {
	id: string;
	name: string;
	character: string | null;
	profilePicture: string | null;
	order: number | null;
};

type CastSectionProps = {
	cast: CastMember[];
};

export default function CastSection({ cast }: CastSectionProps) {
	return (
		<div className="space-y-4">
			<div className="flex items-center justify-between">
				<h3 className="font-semibold text-lg">Cast</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">
				{cast.map((actor) => (
					<PersonCard
						key={actor.id}
						name={actor.name}
						role={actor.character ?? "Unknown"}
						imageUrl={actor.profilePicture ?? "/people-placeholder.svg"}
					/>
				))}
			</div>
		</div>
	);
}
