import { FigletConverter } from '@/components/converter/FigletConverter';

export default function Home() {
  return (
    <main className="min-h-screen p-4 sm:p-8">
      <div className="max-w-7xl mx-auto">
        <header className="mb-8">
          <h1 className="text-3xl sm:text-4xl font-bold mb-2">Figlet UI</h1>
          <p className="text-sm sm:text-base text-muted-foreground">
            ASCII Art Text Generator with 373 Fonts
          </p>
        </header>

        <FigletConverter />

        <footer className="mt-12 pt-8 border-t text-center text-sm text-muted-foreground">
          <p>
            Powered by{' '}
            <a
              href="https://github.com/patorjk/figlet.js"
              target="_blank"
              rel="noopener noreferrer"
              className="underline hover:text-foreground"
            >
              figlet.js
            </a>
            {' '}&middot;{' '}
            Fonts from{' '}
            <a
              href="https://github.com/xero/figlet-fonts"
              target="_blank"
              rel="noopener noreferrer"
              className="underline hover:text-foreground"
            >
              xero/figlet-fonts
            </a>
          </p>
        </footer>
      </div>
    </main>
  );
}