import Link from 'next/link'
import { Settings, Calendar } from 'lucide-react'
import { DeviceDto } from '@/lib/api'

type DeviceCardProps = {
    device: DeviceDto
    href?: string
    onClick?: () => void
    className?: string
}

export function DeviceCard({ device, href, onClick, className }: DeviceCardProps) {
    if (onClick) {
        return (
            <div
                onClick={onClick}
                role="button"
                tabIndex={0}
                onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') onClick(); }}
                className={`group bg-white rounded-2xl shadow-md hover:shadow-xl transition-all duration-300 overflow-hidden border border-gray-100 p-6 relative cursor-pointer ${className || ''}`}
            >
                <div className="flex items-start gap-4">
                    <div className="flex-shrink-0 w-14 h-14 rounded-xl bg-gradient-to-br from-green-500 to-green-600 flex items-center justify-center shadow-md group-hover:scale-110 transition-transform duration-300">
                        <Settings className="w-7 h-7 text-white" />
                    </div>
                    <div className="flex-1">
                        <h3 className="text-xl font-semibold text-gray-900 mb-1 group-hover:text-green-600 transition-colors">
                            {device.deviceName}
                        </h3>
                        <p className="text-sm text-gray-500 mb-2">
                            {device.location || 'بدون موقعیت'}
                        </p>
                        <div className="flex items-center gap-2 text-xs text-gray-400">
                            <span>{device.userName} {device.userFamily}</span>
                        </div>
                    </div>
                    <div className="flex-shrink-0">
                        <Calendar className="w-5 h-5 text-gray-400 group-hover:text-green-600 transition-colors" />
                    </div>
                </div>
                <div className="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-green-500 to-green-600 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300" />
            </div>
        )
    }

    return (
        <Link
            href={href || '#'}
            className={`group bg-white rounded-2xl shadow-md hover:shadow-xl transition-all duration-300 overflow-hidden border border-gray-100 p-6 relative ${className || ''}`}
        >
            <div className="flex items-start gap-4">
                <div className="flex-shrink-0 w-14 h-14 rounded-xl bg-gradient-to-br from-green-500 to-green-600 flex items-center justify-center shadow-md group-hover:scale-110 transition-transform duration-300">
                    <Settings className="w-7 h-7 text-white" />
                </div>
                <div className="flex-1">
                    <h3 className="text-xl font-semibold text-gray-900 mb-1 group-hover:text-green-600 transition-colors">
                        {device.deviceName}
                    </h3>
                    <p className="text-sm text-gray-500 mb-2">
                        {device.location || 'بدون موقعیت'}
                    </p>
                    <div className="flex items-center gap-2 text-xs text-gray-400">
                        <span>{device.userName} {device.userFamily}</span>
                    </div>
                </div>
                <div className="flex-shrink-0">
                    <Calendar className="w-5 h-5 text-gray-400 group-hover:text-green-600 transition-colors" />
                </div>
            </div>
            <div className="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-green-500 to-green-600 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300" />
        </Link>
    )
}