import React from 'react'
import { AlertTriangle, MapPin, Calendar } from 'lucide-react'
import { Badge } from "@/app/_components/ui/badge"
import { Card, CardContent } from "@/app/_components/ui/card"

interface IIncidentCardProps {
    title: string
    time: string
    location: string
    severity: "Low" | "Medium" | "High" | "Critical"
    onClick?: () => void
    showTimeAgo?: boolean
}

export function IncidentCard({
    title,
    time,
    location,
    severity,
    onClick,
    showTimeAgo = true
}: IIncidentCardProps) {
    const getBadgeColor = () => {
        switch (severity) {
            case "Low": return "bg-green-500/20 text-green-300";
            case "Medium": return "bg-yellow-500/20 text-yellow-300";
            case "High": return "bg-orange-500/20 text-orange-300";
            case "Critical": return "bg-red-500/20 text-red-300";
            default: return "bg-gray-500/20 text-gray-300";
        }
    };

    const getBorderColor = () => {
        switch (severity) {
            case "Low": return "border-l-green-500";
            case "Medium": return "border-l-yellow-500";
            case "High": return "border-l-orange-500";
            case "Critical": return "border-l-red-500";
            default: return "border-l-gray-500";
        }
    };

    return (
        <Card
            className={`bg-white/5 hover:bg-white/10 border-0 text-white shadow-none transition-colors border-l-2 ${getBorderColor()} ${onClick ? 'cursor-pointer' : ''}`}
            onClick={onClick}
        >
            <CardContent className="p-3 text-xs">
                <div className="flex items-start gap-2">
                    <AlertTriangle className="h-4 w-4 text-red-400 shrink-0 mt-0.5" />
                    <div>
                        <div className="flex items-center justify-between">
                            <p className="font-medium">{title}</p>
                            <Badge className={`${getBadgeColor()} text-[9px] h-4 ml-1`}>{severity}</Badge>
                        </div>
                        <div className="flex items-center gap-2 mt-1.5 text-white/60">
                            <MapPin className="h-3 w-3" />
                            <span>{location}</span>
                        </div>
                        <div className="mt-1.5 text-white/60 flex items-center gap-1">
                            {showTimeAgo ? (
                                time
                            ) : (
                                <>
                                    <Calendar className="h-3 w-3" />
                                    <span>{time}</span>
                                </>
                            )}
                        </div>
                    </div>
                </div>
            </CardContent>
        </Card>
    );
}