import type { SchedulingView } from '../types'

interface SchedulingCardProps {
    title: string
    description: string
    icon: React.ReactNode
    status: {
        label: string
        color: 'green' | 'blue' | 'yellow'
    }
    footer: {
        left: string
        right: string
    }
    onClick: () => void
}

export function SchedulingCard({ title, description, icon, status, footer, onClick }: SchedulingCardProps) {
    const statusColors = {
        green: 'bg-green-100 dark:bg-green-900/20 text-green-800 dark:text-green-400',
        blue: 'bg-blue-100 dark:bg-blue-900/20 text-blue-800 dark:text-blue-400',
        yellow: 'bg-yellow-100 dark:bg-yellow-900/20 text-yellow-800 dark:text-yellow-400',
    }

    return (
        <div
            onClick={onClick}
            className="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200 cursor-pointer border border-gray-200 dark:border-gray-700 hover:border-blue-300"
        >
            <div className="p-6">
                <div className="flex items-center justify-between mb-4">
                    <div className="flex items-center">
                        <div className="w-12 h-12 bg-blue-100 dark:bg-blue-900/20 rounded-lg flex items-center justify-center">
                            {icon}
                        </div>
                    </div>
                    <div className="text-right">
                        <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${statusColors[status.color]}`}>
                            {status.label}
                        </span>
                    </div>
                </div>

                <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
                    {title}
                </h3>

                <p className="text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-2">
                    {description}
                </p>

                <div className="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400">
                    <span>{footer.left}</span>
                    <div className="flex items-center text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300">
                        <span className="mr-1">{footer.right}</span>
                        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                        </svg>
                    </div>
                </div>
            </div>
        </div>
    )
}