import React, { useState } from 'react';
import { Upload, Button, Input, Card } from 'antd';
import { UploadOutlined } from '@ant-design/icons';

const AudioToScriptGenerator = () => {
  const [audioFile, setAudioFile] = useState(null);
  const [script, setScript] = useState('');

  const handleUpload = (file) => {
    setAudioFile(file);
    return false; // Prevent automatic upload
  };

  const generateScript = () => {
    if (audioFile) {
      // Simulate script generation
      setScript('This is a generated script from the audio file.');
    }
  };

  return (
    <div className="min-h-screen flex flex-col items-center justify-center bg-black text-blue-500 p-4">
      <Card className="w-full max-w-md bg-gray-800 text-white p-6 rounded-lg shadow-lg">
        <h1 className="text-2xl font-bold mb-4">Audio to Script Generator</h1>
        <Upload beforeUpload={handleUpload} showUploadList={false}>
          <Button icon={<UploadOutlined />} className="mb-4">
            Upload Audio
          </Button>
        </Upload>
        <Button
          type="primary"
          onClick={generateScript}
          disabled={!audioFile}
          className="mb-4 bg-blue-500 hover:bg-blue-600"
        >
          Generate Script
        </Button>
        <Input.TextArea
          value={script}
          rows={4}
          readOnly
          placeholder="Generated script will appear here..."
          className="bg-gray-700 text-white"
        />
      </Card>
    </div>
  );
};

export default AudioToScriptGenerator;