// Task card component for Kanban board

use leptos::prelude::*;

use crate::api::{Task, TaskPriority};
use crate::components::Badge;

/// Task card component with drag support
#[component]
pub fn TaskCard(task: Task) -> impl IntoView {
    let border_color = match task.priority {
        TaskPriority::Low => "border-l-blue-500",
        TaskPriority::Medium => "border-l-orange-500",
        TaskPriority::High => "border-l-red-500",
        TaskPriority::Critical => "border-l-red-700",
    };

    let priority_text = match task.priority {
        TaskPriority::Low => "Low",
        TaskPriority::Medium => "Med",
        TaskPriority::High => "High",
        TaskPriority::Critical => "!!",
    };

    let title = task.title.clone();
    let assignee = task.assignee.clone();
    let feature = task.feature.clone();
    let description = task.description.clone();

    view! {
        <div
            draggable="true"
            class=format!(
                "bg-white/8 border border-white/20 {} border-l-4 rounded-lg p-3 min-h-32 cursor-move hover:bg-white/12 transition-all duration-200 shadow-lg shadow-black/50",
                border_color
            )
        >
            {feature.map(|f| {
                view! {
                    <div class="mb-2">
                        <Badge class="bg-purple-500/20 text-purple-400">
                            {f}
                        </Badge>
                    </div>
                }
            })}

            <h4 class="text-sm font-semibold text-white mb-1 line-clamp-2">
                {title}
            </h4>

            {description.map(|d| {
                view! {
                    <p class="text-xs text-gray-400 mb-3 line-clamp-3">
                        {d}
                    </p>
                }
            })}

            <div class="flex items-center justify-between text-xs">
                <span class="text-gray-500">{assignee}</span>
                <Badge class="bg-cyan-500/20 text-cyan-400">
                    {priority_text}
                </Badge>
            </div>
        </div>
    }
}
