"use client"

import { File, Image as ImageIcon } from "lucide-react"
import type { EmailAttachment } from "@/lib/email-data"

export function ListAttachmentChip({ att }: { att: EmailAttachment }) {
  return (
    <span className="inline-flex max-w-[min(100%,280px)] min-w-0 shrink items-center gap-1.5 rounded-full border border-mail-list-chip-border bg-transparent px-2.5 py-1 text-[13px] leading-snug text-mail-list-chip-text">
      {att.kind === "pdf" ? (
        <File className="size-4 shrink-0 fill-destructive" strokeWidth={0} aria-hidden />
      ) : att.kind === "image" ? (
        <ImageIcon
          className="size-4 shrink-0 text-muted-foreground [&_circle]:fill-none [&_path]:fill-none [&_path]:stroke-current [&_rect]:fill-current [&_rect]:opacity-[0.32]"
          strokeWidth={1.5}
          aria-hidden
        />
      ) : (
        <File className="size-4 shrink-0 fill-muted-foreground" strokeWidth={0} aria-hidden />
      )}
      <span className="min-w-0 truncate">{att.name}</span>
    </span>
  )
}