sam-react-prod/src/components/business/construction/management/DetailCard.tsx

'use client';

import { Badge } from '@/components/ui/badge';
import { cn } from '@/lib/utils';
import type { StageDetail, StageCardStatus } from './types';
import { DETAIL_CONFIG } from './types';

interface DetailCardProps {
  detail: StageDetail;
  onClick?: () => void;
}

export default function DetailCard({ detail, onClick }: DetailCardProps) {
  const config = DETAIL_CONFIG[detail.type];

  // 상태 뱃지 색상
  const getStatusBadge = (status?: StageCardStatus) => {
    if (!status) return null;
    switch (status) {
      case 'completed':
        return <Badge variant="secondary" className="text-xs">완료</Badge>;
      case 'in_progress':
        return <Badge className="text-xs bg-yellow-500">진행중</Badge>;
      case 'waiting':
        return <Badge variant="outline" className="text-xs">대기</Badge>;
      default:
        return null;
    }
  };

  return (
    <div
      className={cn(
        'p-3 bg-card rounded-lg border cursor-pointer transition-all hover:shadow-md'
      )}
      onClick={onClick}
    >
      {/* 헤더: 상세 타입 + 상태 뱃지 */}
      <div className="flex items-center justify-between gap-2 mb-2">
        <span className="text-xs font-medium text-muted-foreground">
          {config.label}
        </span>
        {getStatusBadge(detail.status)}
      </div>

      {/* 제목 */}
      <h4 className="text-sm font-medium text-foreground mb-2 line-clamp-1">
        {detail.title}
      </h4>

      {/* 날짜 또는 담당자 */}
      <div className="text-xs text-muted-foreground">
        {detail.date && (
          <div className="flex justify-between">
            <span>{config.dateLabel}</span>
            <span>{detail.date.replace(/-/g, '.')}</span>
          </div>
        )}
        {detail.pm && (
          <div className="flex justify-between">
            <span>{config.dateLabel}</span>
            <span>{detail.pm}</span>
          </div>
        )}
      </div>
    </div>
  );
}