"use client"

import { Dialog, DialogContent } from "@/components/ui/dialog"
import type { KanbanCardData } from "@/types/kanban"

export interface KanbanCardModalProps {
  card: KanbanCardData | null
  onClose: () => void
}

export function KanbanCardModal({ card, onClose }: KanbanCardModalProps) {
  return (
    <Dialog open={!!card} onOpenChange={onClose}>
      <DialogContent>
        {card && (
          <div className="space-y-4">
            <h3 className="text-xl font-semibold">{card.title}</h3>

            <div className="flex gap-2 flex-wrap">
              {card.labels?.map((label) => (
                <span
                  key={label.id}
                  className="text-xs px-2 py-1 rounded-full"
                  style={{ backgroundColor: label.color }}
                >
                  {label.name}
                </span>
              ))}
            </div>

            {card.description && (
              <p className="text-sm text-muted-foreground">{card.description}</p>
            )}

            {card.todos?.length > 0 && (
              <div className="space-y-1">
                {card.todos.map((todo) => (
                  <div key={todo.id} className="flex items-center gap-2">
                    <input type="checkbox" checked={todo.done} readOnly />
                    <span
                      className={`text-sm ${todo.done ? "line-through text-muted-foreground" : ""
                        }`}
                    >
                      {todo.text}
                    </span>
                  </div>
                ))}
              </div>
            )}
          </div>
        )}
      </DialogContent>
    </Dialog>
  )
}