'use client';

import { ReactNode } from 'react';
import { cn } from '@/lib/utils';
import { Badge } from '@/components/ui/badge';
import { getPresetStyle } from '@/lib/utils/status-config';

interface KanbanColumnProps {
  title: string;
  count?: number;
  headerAction?: ReactNode;
  children: ReactNode;
  className?: string;
  emptyMessage?: string;
  isEmpty?: boolean;
}

export default function KanbanColumn({
  title,
  count,
  headerAction,
  children,
  className,
  emptyMessage = '항목이 없습니다.',
  isEmpty = false,
}: KanbanColumnProps) {
  return (
    <div className={cn('flex flex-col flex-1 min-w-0 bg-muted/30 rounded-lg', className)}>
      {/* 컬럼 헤더 */}
      <div className="flex items-center justify-between p-3 border-b">
        <div className="flex items-center gap-2">
          <h3 className="text-sm font-semibold text-foreground">{title}</h3>
          {count !== undefined && (
            <Badge className={`text-xs ${getPresetStyle('info')}`}>{count}건</Badge>
          )}
        </div>
        {headerAction}
      </div>

      {/* 컬럼 컨텐츠 */}
      <div className="flex-1 p-2 space-y-2 overflow-y-auto min-h-[500px] max-h-[calc(100vh-300px)]">
        {isEmpty ? (
          <div className="flex items-center justify-center h-24 text-sm text-muted-foreground">
            {emptyMessage}
          </div>
        ) : (
          children
        )}
      </div>
    </div>
  );
}
