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

type CrewMember = {
	id: string;
	name: string;
	job: string | null;
	department: string | null;
	profilePicture: string | null;
	order: number | null;
};

type CrewSectionProps = {
	crew: CrewMember[];
};

export default function CrewSection({ crew }: CrewSectionProps) {
	return (
		<div className="space-y-4">
			<div className="flex items-center justify-between">
				<h3 className="font-semibold text-lg">Crew</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">
				{crew.map((member) => {
					const role = member.job
						? member.department
							? `${member.job} (${member.department})`
							: member.job
						: "Unknown";

					return (
						<PersonCard
							key={member.id}
							name={member.name}
							role={role}
							imageUrl={member.profilePicture ?? "/people-placeholder.svg"}
						/>
					);
				})}
			</div>
		</div>
	);
}
