import { useId } from "react";

/**
 * @param {{
 *   title: string,
 *   description?: string,
 *   children?: React.ReactNode,
 *   footer?: React.ReactNode,
 *   className?: string
 * }} props
 */
export function Card({ title, description, children, footer, className = "" }) {
  const titleId = useId();

  return (
    <article
      className={`ui-card ${className}`.trim()}
      aria-labelledby={titleId}
    >
      <div className="ui-card__header">
        <h3 id={titleId}>{title}</h3>
        {description ? <p>{description}</p> : null}
      </div>
      {children ? <div className="ui-card__content">{children}</div> : null}
      {footer ? <footer className="ui-card__footer">{footer}</footer> : null}
    </article>
  );
}