import {
  LinkIcon,
  Loader2,
  Trash2,
  UploadIcon,
} from 'lucide-react';
import { BiMicrophone } from 'react-icons/bi';

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

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

export const FileDataAudioEditActions = ({
  uploading,
  buttonTitle,
  isMobile,
  col,
  onDelete,
  onUpload,
  onCopyLink,
  onRecordAudio,
}: FileDataAudioEditActionsProps) => (
  <div className='flex items-center gap-2'>
    <Button
      variant='ghost'
      size='icon'
      onClick={(e) => {
        e.preventDefault();
        onDelete();
      }}
    >
      <Trash2 />
    </Button>
    <Button
      variant='ghost'
      onClick={(e) => {
        e.preventDefault();
        onUpload();
      }}
    >
      {uploading ? (
        <>
          <Loader2 className='size-4 animate-spin' />
          {Lang.key('uploading_file_wait')}
        </>
      ) : (
        <>
          <UploadIcon />
          {!isMobile && col > 16 ? buttonTitle : ''}
        </>
      )}
    </Button>
    <Button
      variant='ghost'
      onClick={(e) => {
        e.preventDefault();
        onRecordAudio();
      }}
    >
      <BiMicrophone />
    </Button>
    <Button
      variant='ghost'
      onClick={(e) => {
        e.preventDefault();
        onCopyLink();
      }}
    >
      <LinkIcon />
      {!isMobile && col > 16 ? Lang.key('copy_link') : ''}
    </Button>
  </div>
);
