import { fileCategory, categoryColorClass, type FileCategory } from '../../lib/fileType';

/** カテゴリごとの 16x16 ストロークグリフ (既存ファイル行のアイコンと同じスタイル)。 */
function glyph(cat: FileCategory) {
  switch (cat) {
    case 'image':
      return (
        <>
          <rect x="2" y="3" width="12" height="10" rx="1.5" />
          <circle cx="5.5" cy="6.5" r="1" />
          <path d="M3 12l3-3 2.5 2.5L11 7l2 2" />
        </>
      );
    case 'spreadsheet':
      return (
        <>
          <rect x="2.5" y="3" width="11" height="10" rx="1" />
          <path d="M2.5 6.5h11M2.5 10h11M6 3v10M10 3v10" />
        </>
      );
    case 'document':
      return (
        <>
          <path d="M9 2H4a1.5 1.5 0 00-1.5 1.5v9A1.5 1.5 0 004 14h8a1.5 1.5 0 001.5-1.5V6.5L9 2z" />
          <path d="M9 2v4.5h4.5" />
          <path d="M5.5 9h5M5.5 11h3" />
        </>
      );
    case 'presentation':
      return (
        <>
          <rect x="2" y="3" width="12" height="8" rx="1" />
          <path d="M8 11v2M6 14h4" />
        </>
      );
    case 'code':
      return <path d="M6 5L3 8l3 3M10 5l3 3-3 3" />;
    case 'archive':
      return (
        <>
          <rect x="3" y="3" width="10" height="11" rx="1" />
          <path d="M8 3v11" strokeDasharray="1.5 1.5" />
        </>
      );
    case 'audio':
      return (
        <>
          <circle cx="5.3" cy="11.5" r="1.7" />
          <circle cx="10.7" cy="9.7" r="1.7" />
          <path d="M7 11.5V4l5.4-1.5v7.2" />
        </>
      );
    case 'video':
      return (
        <>
          <rect x="2" y="3.5" width="12" height="9" rx="1.5" />
          <path d="M7 6.3l3 1.7-3 1.7z" />
        </>
      );
    case 'pdf':
    case 'other':
    default:
      // 折れ角のあるページ。pdf は色 (赤) で識別、other は灰色。
      return (
        <>
          <path d="M9 2H4a1.5 1.5 0 00-1.5 1.5v9A1.5 1.5 0 004 14h8a1.5 1.5 0 001.5-1.5V6.5L9 2z" />
          <path d="M9 2v4.5h4.5" />
        </>
      );
  }
}

export function FileTypeIcon({ name, className }: { name: string; className?: string }) {
  const cat = fileCategory(name);
  return (
    <svg
      className={`${className ?? 'w-4 h-4'} ${categoryColorClass(cat)}`}
      viewBox="0 0 16 16"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden="true"
    >
      {glyph(cat)}
    </svg>
  );
}
