import React from 'react';
import { cn } from '@/lib/utils';
import { KanbanCard } from './KanbanCard';
import { ScrollArea } from '@/components/ui/scroll-area';

/**
 * Premium Kanban Board
 * Production version - Clean and functional.
 */
export const KanbanBoard = ({ 
  columns = [], 
  className 
}) => {
  return (
    <div className={cn("flex gap-4 h-full w-full overflow-x-auto pb-4 custom-scrollbar", className)}>
      {columns.map((column) => (
        <div 
          key={column.id} 
          className="flex-shrink-0 w-80 flex flex-col bg-[#f4f7f9] dark:bg-[#0d0d0d] rounded-2xl border border-slate-200/50 dark:border-white/5"
        >
          {/* Column Header */}
          <div className="p-4 flex items-center justify-between">
            <div className="flex items-center gap-2">
              <div className={cn(
                "w-2 h-2 rounded-full",
                column.color === 'blue' && "bg-blue-500",
                column.color === 'emerald' && "bg-emerald-500",
                column.color === 'orange' && "bg-orange-500",
                column.color === 'red' && "bg-red-500",
                column.color === 'slate' && "bg-slate-400"
              )} />
              <h2 className="text-[11px] font-black uppercase text-slate-700 dark:text-slate-300 tracking-[0.05em]">
                {column.title}
              </h2>
              <span className="ml-2 px-2 py-0.5 rounded-full bg-slate-200 dark:bg-white/10 text-[10px] font-bold text-slate-500 dark:text-slate-400">
                {column.cards?.length || 0}
              </span>
            </div>
          </div>

          {/* Cards Area */}
          <ScrollArea className="flex-1 px-3">
            <div className="flex flex-col gap-3 pb-4">
              {column.cards?.map((card) => (
                <KanbanCard 
                  key={card.id}
                  title={card.title}
                  subtitle={card.subtitle}
                  date={card.date}
                  details={card.details}
                  statusColor={column.color}
                />
              ))}
              
              {(!column.cards || column.cards.length === 0) && (
                <div className="mt-8 flex flex-col items-center justify-center opacity-20 italic">
                   <div className="w-12 h-12 border-2 border-dashed border-slate-400 rounded-xl mb-2" />
                   <span className="text-[10px] font-bold uppercase tracking-widest text-slate-500">Sem Itens</span>
                </div>
              )}
            </div>
          </ScrollArea>
        </div>
      ))}
    </div>
  );
};