import {
  LinkIcon,
  Loader2,
  PencilRulerIcon,
  Trash2,
  UploadIcon,
} from 'lucide-react';

import { Button } from '@/components/ui/button';
import { Lang } from '@/lang/Lang';

type FileDataImageEditActionsProps = {
  uploading: boolean;
  buttonTitle: string;
  isMobile: boolean;
  col: number;
  onDelete: () => void;
  onUpload: () => void;
  onEdit: () => void;
  onCopyLink: () => void;
};

export const FileDataImageEditActions = ({
  uploading,
  buttonTitle,
  isMobile,
  col,
  onEdit,
  onDelete,
  onUpload,
  onCopyLink,
}: FileDataImageEditActionsProps) => (
  <div className='flex items-center gap-2'>
    <Button
      variant='ghost'
      tooltip={Lang.key('delete_image')}
      size='icon'
      onClick={(e) => {
        e.preventDefault();
        onDelete();
      }}
    >
      <Trash2 />
    </Button>
    <Button
      variant='ghost'
      tooltip={Lang.key('upload_new_image')}
      onClick={(e) => {
        e.preventDefault();
        onUpload();
      }}
    >
      {uploading ? (
        <>
          <Loader2 className='size-4 animate-spin' />
          {Lang.key('uploading_file_wait')}
        </>
      ) : (
        <>
          <UploadIcon />

        </>
      )}
    </Button>
    <Button
      variant='ghost'
      tooltip={Lang.key('copy_link')}
      onClick={(e) => {
        e.preventDefault();
        onCopyLink();
      }}
    >
      <LinkIcon />

    </Button>
    <Button
      variant='ghost'
      tooltip={Lang.key('edit_image')}
      onClick={(e) => {
        e.preventDefault();
        onEdit();
      }}
    >
      <PencilRulerIcon className='size-4' />
    </Button>
  </div>
);
