Kanban Task Card

'use client';

import './TaskKanbanCard.css';

/**
 * 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'.
 */
export interface TaskKanbanCardProps {
  task: string;
  date: string;
  assigneeInitials: string;
  priority?: 'low' | 'med' | 'high';
}

export function TaskKanbanCard({ task, date, assigneeInitials, priority = 'low' }: TaskKanbanCardProps) {
  const priorityLabels = { low: 'Low', med: 'Medium', high: 'High' };
  return (
    <>
      <div className="task-card" data-rk-11d45c="">
        <div className="task-card__tags" data-rk-11d45c="">
          <span className={`task-card__tag task-card__tag--${priority}`} data-rk-11d45c="">{priorityLabels[priority]}</span>
        </div>
        <p className="task-card__desc" data-rk-11d45c="">{task}</p>
        <div className="task-card__footer" data-rk-11d45c="">
          <span className="task-card__date" data-rk-11d45c="">{date}</span>
          <div className="task-card__assignee" data-rk-11d45c="">{assigneeInitials}</div>
        </div>
      </div>
    </>
  );
}

export default TaskKanbanCard;

/* TaskKanbanCard — ported from astro-component-kit (cards/TaskKanbanCard.astro) */

.task-card:where([data-rk-11d45c]) { 
  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:where([data-rk-11d45c]) { 
  font-size: 0.7rem; font-weight: 700; 
  padding: 2px 8px; border-radius: 4px; 
}
.task-card__tag--high:where([data-rk-11d45c]) { background: rgba(239,68,68,0.1); color: #f87171; }
.task-card__tag--med:where([data-rk-11d45c]) { background: rgba(245,158,11,0.1); color: #fbbf24; }
.task-card__tag--low:where([data-rk-11d45c]) { background: rgba(52,211,153,0.1); color: #34d399; }

.task-card__desc:where([data-rk-11d45c]) { font-size: 0.85rem; color: var(--c-text-1, #e2e8f0); margin: 0.75rem 0; font-weight: 500; }
.task-card__footer:where([data-rk-11d45c]) { display: flex; justify-content: space-between; align-items: center; }
.task-card__date:where([data-rk-11d45c]) { font-size: 0.75rem; color: var(--c-text-2, #64748b); }
.task-card__assignee:where([data-rk-11d45c]) { 
  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; 
}