'use client';

import type { CSSProperties } from 'react';
import type { TaskCategory } from '@/lib/task-category';

export function CategoryChip({ category, widthEm }: { category?: TaskCategory; widthEm?: number }) {
  const widthStyle: CSSProperties = widthEm ? { width: `${widthEm}em` } : {};
  if (!category) {
    return (
      <span
        className="inline-flex h-5 shrink-0 items-center justify-center whitespace-nowrap rounded px-1.5 text-[10px] font-medium text-[var(--ink-muted)]"
        style={widthStyle}
      >
        未分类
      </span>
    );
  }
  return (
    <span
      className="inline-flex h-5 shrink-0 items-center justify-center whitespace-nowrap rounded px-1.5 text-[10px] font-medium"
      style={{
        ...widthStyle,
        backgroundColor: category.color ? `${category.color}15` : 'var(--bg-subtle)',
        color: category.color || 'var(--ink-soft)',
      }}
    >
      {category.name}
    </span>
  );
}