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

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

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

export const FileDataAudioEmptyUpload = ({
  uploading,
  buttonTitle,
  isMobile,
  col,
  onUpload,
  onRecordAudio,
}: FileDataAudioEmptyUploadProps) => (
  <ButtonGroup>
    <Button
      variant='outline'
      tooltip={Lang.key('upload_new')}
      aria-label={Lang.key('upload_new')}
      onClick={onUpload}
    >
      {uploading ? (
        <>
          <Loader2 className='size-4 animate-spin' />
          {Lang.key('uploading_file_wait')}
        </>
      ) : (
        <>
          <UploadIcon />

        </>
      )}
    </Button>
    <Button
      variant='outline'
      tooltip={Lang.key('record_audio')}
      aria-label={Lang.key('record_audio')}
      onClick={(e) => {
        e.preventDefault();
        onRecordAudio();
      }}
    >
      <BiMicrophone />
    </Button>
  </ButtonGroup>
);
