import { Card, Typography } from 'antd';
import type { ReactNode } from 'react';

const { Link, Text, Title } = Typography;

export type SectionMenuItem = {
  key: string;
  label: string;
  href: string;
  description?: string;
};

export type SectionMenuLayoutProps = {
  title: string;
  description?: string;
  items: SectionMenuItem[];
  children: ReactNode;
};

export function SectionMenuLayout({
  title,
  description,
  items,
  children,
}: SectionMenuLayoutProps) {
  return (
    <div className="section-menu-layout">
      <aside className="section-menu-layout__sidebar">
        <Card className="section-menu-layout__nav-card" bordered={false}>
          <Title level={5}>{title}</Title>
          {description ? <Text type="secondary">{description}</Text> : null}

          <nav className="section-menu-layout__nav" aria-label={title}>
            {items.map((item) => (
              <Link key={item.key} href={item.href} className="section-menu-layout__link">
                <span className="section-menu-layout__link-label">{item.label}</span>
                {item.description ? (
                  <span className="section-menu-layout__link-copy">{item.description}</span>
                ) : null}
              </Link>
            ))}
          </nav>
        </Card>
      </aside>

      <div className="section-menu-layout__content">{children}</div>
    </div>
  );
}
