import cl from "clsx"

import { DASHBOARD_CARDS, DASHBOARD_PIPELINE } from "./config/dashboard.config"
import styles from "./styles/dashboard.module.css"
import type { DashboardScreenProps } from "./types/dashboard.type"

/**
 * Стартовый dashboard admin-приложения.
 *
 * Используется для:
 *  - отображения стартового состояния admin MVP
 *  - обзора будущих разделов и пайплайна генерации
 */
export const DashboardScreen = (props: DashboardScreenProps) => {
  const { className, ...rootAttrs } = props

  return (
    <section {...rootAttrs} className={cl(styles.root, className)}>
      <div className={styles.hero}>
        <p className={styles.eyebrow}>Image Platform Admin</p>
        <h1 className={styles.title}>Control plane для image delivery</h1>
        <p className={styles.lead}>
          Админка будет управлять allowed hosts, assets, source versions, presets и variant
          generation без прямого доступа к storage-слою.
        </p>
      </div>

      <div className={styles.grid} aria-label="Будущие разделы admin">
        {DASHBOARD_CARDS.map((card) => (
          <article className={styles.card} key={card.title}>
            <h2 className={styles.cardTitle}>{card.title}</h2>
            <p className={styles.cardDescription}>{card.description}</p>
          </article>
        ))}
      </div>

      <div className={styles.pipeline} aria-label="Пайплайн генерации изображений">
        {DASHBOARD_PIPELINE.map((step) => (
          <span className={styles.pipelineStep} key={step}>
            {step}
          </span>
        ))}
      </div>
    </section>
  )
}