Project Task Card

'use client';

import './KanbanItemCard.css';

/**
 * KanbanItemCard — Small card optimized for list-based project management.
 * 
 * @param {string} title - The description of the ticket/task.
 * @param {string} priority - Priority level label (e.g. "Prio").
 * @param {string} tag - Contextual label tag (e.g. "SEO", "Bug").
 */
export interface KanbanItemCardProps {
  title: string;
  priority?: string;
  tag?: string;
}

export function KanbanItemCard({ title, priority, tag }: KanbanItemCardProps) {
  return (
    <>
      <div className="k-item" data-rk-445dff="">
        <p className="k-item__title" data-rk-445dff="">{title}</p>
        <div className="k-item__badges" data-rk-445dff="">
          {priority && <span className="k-item__badge k-item__badge--prio" data-rk-445dff="">{priority}</span>}
          {tag && <span className="k-item__badge k-item__badge--opt" data-rk-445dff="">{tag}</span>}
        </div>
      </div>
    </>
  );
}

export default KanbanItemCard;

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

.k-item:where([data-rk-445dff]) { 
  background: var(--c-bg-elev, #111); 
  border: 1px solid var(--c-border, #333); 
  padding: var(--sp-4, 1rem); 
  border-radius: var(--r-md, 8px); 
  cursor: pointer; 
  transition: 0.2s; 
}
.k-item:hover:where([data-rk-445dff]) { 
  border-color: var(--c-primary, #6366f1); 
  transform: scale(1.02); 
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.k-item__title:where([data-rk-445dff]) { margin: 0 0 0.75rem; font-size: 0.85rem; color: var(--c-text-1, #fff); font-weight: 500; line-height: 1.4; }
.k-item__badges:where([data-rk-445dff]) { display: flex; gap: 4px; flex-wrap: wrap; }
.k-item__badge:where([data-rk-445dff]) { font-size: 0.65rem; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; }

.k-item__badge--prio:where([data-rk-445dff]) { background: rgba(245,158,11,0.1); color: #fbbf24; }
.k-item__badge--opt:where([data-rk-445dff]) { background: rgba(52,211,153,0.1); color: #34d399; }