import Link from 'next/link';
import * as Button from '@/components/ui/button';
import { Star } from 'lucide-react';

export default function Home() {
  return (
    <div className='container mx-auto flex-1 px-5'>
      <div className='mt-48 flex flex-col items-center'>
        <h1 className='text-title-h3 text-text-strong-950 max-w-3xl text-center text-balance'>
          Quick Starter AlignUI Template with Next.js & Typescript
        </h1>

        <div className='mt-6 flex gap-4'>
          <Button.Root variant='neutral' asChild>
            <a
              href='https://github.com/supa-kit/alignui-kit'
              target='_blank'
            >
              <Button.Icon as={Star} className='size-4' />
              Give a star
            </a>
          </Button.Root>

          <Button.Root variant='neutral' mode='stroke' asChild>
            <Link href='https://github.com/supa-kit/alignui-kit' target='_blank'>
              Read our docs
            </Link>
          </Button.Root>
        </div>

        <div className='mt-12'>
          <h2 className='text-text-primary text-lg font-semibold'>
            What&apos;s Included:
          </h2>
          <ul className='text-paragraph-sm text-text-sub-600 mt-3 ml-6 flex list-disc flex-col gap-2 font-mono font-medium'>
            <li>Tailwind setup with AlignUI tokens.</li>
            <li>
              Base components are stored in{' '}
              <code className='bg-bg-weak-50 text-text-strong-950 rounded px-1 py-0.5 font-semibold'>
                /components/ui
              </code>{' '}
              folder.
            </li>
            <li>
              Utils are stored in{' '}
              <code className='bg-bg-weak-50 text-text-strong-950 rounded px-1 py-0.5 font-semibold'>
                /utils
              </code>{' '}
              folder.
            </li>
            <li>
              Custom hooks are stored in{' '}
              <code className='bg-bg-weak-50 text-text-strong-950 rounded px-1 py-0.5 font-semibold'>
                /hooks
              </code>{' '}
              folder.
            </li>
            <li>Dark mode setup.</li>
            <li>Inter font setup.</li>
          </ul>
        </div>
      </div>
    </div>
  );
}