"use client";

import { X, FileText } from "lucide-react";
import type { AttachedFile } from "@/lib/file-utils";
import { formatFileSize } from "@/lib/file-utils";

type Props = {
  files: AttachedFile[];
  onRemove: (id: string) => void;
};

export function FilePreviewChips({ files, onRemove }: Props) {
  if (files.length === 0) return null;

  return (
    <div className="flex flex-wrap gap-2 px-6 pb-2">
      {files.map((f) => (
        <div
          key={f.id}
          className="flex items-center gap-2 px-3 py-1.5 bg-foreground/5 border border-foreground/10 rounded-xl backdrop-blur-sm group"
        >
          {f.isImage ? (
            <img
              src={f.preview}
              alt={f.file.name}
              className="w-8 h-8 rounded-lg object-cover"
            />
          ) : (
            <div className="w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center">
              <FileText className="w-4 h-4 text-primary/60" />
            </div>
          )}
          <div className="flex flex-col">
            <span className="text-xs font-medium text-foreground/70 max-w-[120px] truncate">
              {f.file.name}
            </span>
            <span className="text-[9px] text-muted-foreground">
              {formatFileSize(f.file.size)}
            </span>
          </div>
          <button
            type="button"
            onClick={() => onRemove(f.id)}
            className="w-5 h-5 flex items-center justify-center rounded-full bg-foreground/5 hover:bg-destructive/20 text-muted-foreground hover:text-destructive transition-colors"
          >
            <X size={12} />
          </button>
        </div>
      ))}
    </div>
  );
}
