import React from 'react';

export const Pipeline: React.FC = () => {
    const stages = ['New', 'Contacted', 'Qualified', 'Proposal', 'Won', 'Lost'];

    return (
        <div className="p-6 h-full flex flex-col">
            <h1 className="text-2xl font-bold text-slate-900 mb-6">Pipeline</h1>

            <div className="flex-1 overflow-x-auto">
                <div className="flex gap-4 min-w-max h-full">
                    {stages.map((stage) => (
                        <div key={stage} className="w-80 flex-shrink-0 flex flex-col rounded-lg bg-slate-100 p-4">
                            <h3 className="font-medium text-slate-700 mb-4 flex justify-between items-center">
                                {stage}
                                <span className="bg-slate-200 text-slate-600 text-xs px-2 py-1 rounded-full">0</span>
                            </h3>
                            <div className="flex-1 space-y-3">
                                {/* Draggable items would go here */}
                                <div className="bg-white p-3 rounded shadow-sm border border-slate-200 cursor-pointer hover:shadow-md transition-shadow">
                                    <p className="font-medium text-sm">Sample Deal</p>
                                    <p className="text-xs text-slate-500 mt-1">$5,000</p>
                                </div>
                            </div>
                        </div>
                    ))}
                </div>
            </div>
        </div>
    );
};
