Project Task Card

---
/**
 * 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").
 */
interface Props {
  title: string;
  priority?: string;
  tag?: string;
}

const { title, priority, tag } = Astro.props;
---

<div class="k-item">
  <p class="k-item__title">{title}</p>
  <div class="k-item__badges">
    {priority && <span class="k-item__badge k-item__badge--prio">{priority}</span>}
    {tag && <span class="k-item__badge k-item__badge--opt">{tag}</span>}
  </div>
</div>

<style>
  .k-item { 
    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 { 
    border-color: var(--c-primary, #6366f1); 
    transform: scale(1.02); 
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }
  .k-item__title { 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 { display: flex; gap: 4px; flex-wrap: wrap; }
  .k-item__badge { font-size: 0.65rem; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; }
  
  .k-item__badge--prio { background: rgba(245,158,11,0.1); color: #fbbf24; }
  .k-item__badge--opt { background: rgba(52,211,153,0.1); color: #34d399; }
</style>