import { OpenInNewTab } from './utils/common';
import { PodcastGenerator } from './components/PodcastGenerator';
import { useState } from 'react';
import { ScriptMaker } from './components/ScriptMaker';

function App() {
  const [genratedScript, setGeneratedScript] = useState<string>('');
  const [busy, setBusy] = useState<boolean>(false);

  return (
    <div className="bg-base-300 min-h-screen">
      <div className="max-w-screen-lg mx-auto p-4 pb-32 grid gap-4 grid-cols-1">
        <div className="p-4 col-span-1">
          <h1 className="text-3xl font-bold mb-2">
            Podcast generator via Kokoro-TTS
          </h1>
          <p>
            A space made by{' '}
            <OpenInNewTab href="https://hf.co/ngxson">🤗 ngxson</OpenInNewTab>
          </p>
        </div>

        <ScriptMaker
          setScript={setGeneratedScript}
          setBusy={setBusy}
          busy={busy}
        />

        <PodcastGenerator
          genratedScript={genratedScript}
          setBusy={setBusy}
          busy={busy}
        />
      </div>
    </div>
  );
}

export default App;