import React from 'react';
import { User, CreditCard, Car, Calendar, Info } from 'lucide-react';
import { cn } from '@/lib/utils';

/**
 * Premium Kanban Card
 * Based on the reference image with high-fidelity UI.
 */
export const KanbanCard = ({ 
  title, 
  subtitle, 
  details = [], 
  date, 
  statusColor = "emerald", 
  className 
}) => {
  return (
    <div className={cn(
      "group relative bg-white dark:bg-[#1a1a1a] border border-slate-200 dark:border-white/5 rounded-xl p-4 shadow-sm hover:shadow-md transition-all duration-300",
      className
    )}>
      {/* Top Right Status Batch Indicator */}
      <div className={cn(
        "absolute top-3 right-3 w-1.5 h-1.5 rounded-full shadow-[0_0_6px_rgba(0,0,0,0.1)]",
        statusColor === 'blue' && "bg-blue-500 shadow-blue-500/40",
        statusColor === 'emerald' && "bg-emerald-500 shadow-emerald-500/40",
        statusColor === 'orange' && "bg-orange-500 shadow-orange-500/40",
        statusColor === 'red' && "bg-red-500 shadow-red-500/40",
        statusColor === 'slate' && "bg-slate-400 shadow-slate-400/40"
      )} />

      <div className="flex gap-3">
        {/* Avatar Component */}
        <div className="shrink-0 w-10 h-10 bg-slate-100 dark:bg-white/5 rounded-full flex items-center justify-center border border-slate-200/50 dark:border-white/10 group-hover:scale-105 transition-transform duration-300">
          <User size={20} className="text-slate-500 dark:text-slate-400" />
        </div>

        <div className="flex-1 min-w-0">
          {/* Title - Bold Uppercase */}
          <h3 className="text-[11px] font-black text-slate-800 dark:text-slate-100 uppercase tracking-tight leading-tight truncate mb-2">
            {title}
          </h3>

          {/* Details Grid */}
          <div className="space-y-1.5 mb-3">
            {details.map((detail, idx) => (
              <div key={idx} className="flex items-center gap-2 opacity-80 group-hover:opacity-100 transition-opacity">
                {detail.icon && <detail.icon size={11} className="text-slate-400 shrink-0" />}
                <span className="text-[9px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider truncate">
                  {detail.label}: <span className="text-slate-600 dark:text-slate-300">{detail.value}</span>
                </span>
              </div>
            ))}
          </div>

          <div className="h-[1px] w-full bg-slate-100 dark:bg-white/5 mb-3" />

          {/* Footer Info */}
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-1.5">
              <Calendar size={11} className="text-slate-400" />
              <span className="text-[9px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-widest">{date}</span>
            </div>
            <div className="flex items-center gap-1.5">
              <Info size={11} className="text-slate-400" />
              <span className="text-[9px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-widest">Não Informado</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};