import Image from "next/image";

import { Button } from "@/components/ui/button";
import { Minus, Video, Music } from "lucide-react";
import { getFileType } from "./uploader";

export const SelectedFiles = ({
  files,
  isAiWorking,
  onDelete,
}: {
  files: string[];
  isAiWorking: boolean;
  onDelete: (file: string) => void;
}) => {
  if (files.length === 0) return null;
  return (
    <div className="px-4 pt-3">
      <div className="flex items-center justify-start gap-2">
        {files.map((file) => (
          <div
            key={file}
            className="flex items-center relative justify-start gap-2 p-1 bg-neutral-700 rounded-md"
          >
            {getFileType(file) === "image" ? (
              <Image
                src={file}
                alt="uploaded image"
                className="size-12 rounded-md object-cover"
                width={40}
                height={40}
              />
            ) : getFileType(file) === "video" ? (
              <Video className="size-12 rounded-md object-cover" />
            ) : getFileType(file) === "audio" ? (
              <Music className="size-12 rounded-md object-cover" />
            ) : null}
            <Button
              size="iconXsss"
              variant="secondary"
              className={`absolute top-0.5 right-0.5 ${
                isAiWorking ? "opacity-50 !cursor-not-allowed" : ""
              }`}
              disabled={isAiWorking}
              onClick={() => onDelete(file)}
            >
              <Minus className="size-4" />
            </Button>
          </div>
        ))}
      </div>
    </div>
  );
};