Kanban Task Card

---
/**
 * TaskKanbanCard — Agile task card with priority labels and due dates.
 * 
 * @param {string} task - The description of the task being managed.
 * @param {string} date - Visual date string indicator (e.g. "📅 Oct 24").
 * @param {string} assigneeInitials - Short initials for the user avatar (e.g "MJ").
 * @param {'low'|'med'|'high'} priority - Controls the appearance of the priority tag label. Default is 'low'.
 */
interface Props {
  task: string;
  date: string;
  assigneeInitials: string;
  priority?: 'low' | 'med' | 'high';
}

const { task, date, assigneeInitials, priority = 'low' } = Astro.props;

const priorityLabels = { low: 'Low', med: 'Medium', high: 'High' };
---

<div class="task-card">
  <div class="task-card__tags">
    <span class={`task-card__tag task-card__tag--${priority}`}>{priorityLabels[priority]}</span>
  </div>
  <p class="task-card__desc">{task}</p>
  <div class="task-card__footer">
    <span class="task-card__date">{date}</span>
    <div class="task-card__assignee">{assigneeInitials}</div>
  </div>
</div>

<style>
  .task-card { 
    background: var(--c-bg-elev, #1e293b); 
    padding: var(--sp-4, 1rem); 
    border-radius: var(--r-md, 10px); 
    border: 1px solid var(--c-border, #334155); 
  }
  .task-card__tag { 
    font-size: 0.7rem; font-weight: 700; 
    padding: 2px 8px; border-radius: 4px; 
  }
  .task-card__tag--high { background: rgba(239,68,68,0.1); color: #f87171; }
  .task-card__tag--med { background: rgba(245,158,11,0.1); color: #fbbf24; }
  .task-card__tag--low { background: rgba(52,211,153,0.1); color: #34d399; }
  
  .task-card__desc { font-size: 0.85rem; color: var(--c-text-1, #e2e8f0); margin: 0.75rem 0; font-weight: 500; }
  .task-card__footer { display: flex; justify-content: space-between; align-items: center; }
  .task-card__date { font-size: 0.75rem; color: var(--c-text-2, #64748b); }
  .task-card__assignee { 
    width: 24px; height: 24px; 
    background: var(--c-primary, #6366f1); color: #fff; 
    font-size: 0.65rem; border-radius: 50%; 
    display: grid; place-items: center; font-weight: 700; 
  }
</style>