import { Badge } from "~/shared/components/ui/badge";

interface DoneColumnProps {
	items: any[];
}

export function DoneColumn({ items }: DoneColumnProps) {
	return (
		<div className="flex flex-col w-64 min-w-64 min-h-0 bg-gray-50 rounded-lg">
			<div className="px-3 py-2 border-b font-medium text-sm">
				Done <span className="text-gray-400">({items.length})</span>
			</div>
			<div className="flex-1 overflow-y-auto p-2 space-y-1">
				{items.map((item: any) => (
					<div key={item.id} className="rounded border bg-white p-2">
						<p className="text-xs font-medium truncate">{item.name}</p>
						<Badge variant={item.status === "done" ? "done" : "error"}>{item.status}</Badge>
					</div>
				))}
				{items.length === 0 && <p className="text-sm text-gray-400 text-center py-8">No completed items</p>}
			</div>
		</div>
	);
}