import { useNavigate } from "react-router-dom";
import GeneratorCard from "../../components/GeneratorCard/GeneratorCard";
import logo from "../../assets/common/HITGENERATOR-Logo.png";
import styles from "./Main.module.css";

export default function Main() {
  const navigate = useNavigate();

  return (
    <main className={styles.page}>
      <section className={styles.hero} aria-labelledby="main-title">
        <img
          className={styles.logo}
          src={logo}
          alt="ShitGenerator"
          width="1080"
          height="608"
        />
        <h1 className={styles.title} id="main-title">
          ShitGenerator
        </h1>
      </section>

      <section className={styles.cards} aria-label="Выбор генератора">
        <GeneratorCard
          title="Генерация видео"
          description="Собирай видеоролики из идеи, промпта и нужного визуального направления."
          label="Видео"
          accent="cyan"
          onClick={() => navigate("/video")}
        />
        <GeneratorCard
          title="Генерация картинок"
          description="Создавай изображения под задачу, стиль и настроение за пару кликов."
          label="Картинки"
          accent="violet"
          onClick={() => navigate("/picture")}
        />
      </section>
    </main>
  );
}