import type { ComponentPropsWithoutRef, ReactNode } from 'react';
import styles from './StateShell.module.css';

interface StateShellProps {
  title: string;
  body: string;
  children?: ReactNode;
  status?: boolean;
}

export function StateShell({ title, body, children, status = false }: StateShellProps) {
  return (
    <main id="main-content" className={styles.main} tabIndex={-1}>
      <section
        className={styles.panel}
        role={status ? 'status' : undefined}
        aria-live={status ? 'polite' : undefined}
      >
        <h1>{title}</h1>
        <p>{body}</p>
        {children ? <div className={styles.content}>{children}</div> : null}
      </section>
    </main>
  );
}

export function StateActions({ children }: { children: ReactNode }) {
  return <div className={styles.actions}>{children}</div>;
}

export function StateAction({ children, ...props }: ComponentPropsWithoutRef<'a'>) {
  return (
    <a className={styles.action} {...props}>
      {children}
    </a>
  );
}

export function StateButton({ children, ...props }: ComponentPropsWithoutRef<'button'>) {
  return (
    <button className={styles.action} type="button" {...props}>
      {children}
    </button>
  );
}

export function LoadingSkeleton() {
  return (
    <div className={styles.skeleton} aria-hidden="true">
      <span />
      <span />
      <span />
    </div>
  );
}
