import { ActionLink } from '@/components/actions/ActionLink';
import { Icon, type ApprovedIconName } from '@/components/foundation/Icon';
import styles from './StateMessage.module.css';

interface StateMessageProps {
  icon?: ApprovedIconName;
  title: string;
  body: string;
  action?: { label: string; href: string };
}

export function StateMessage({ icon = 'info', title, body, action }: StateMessageProps) {
  return (
    <section className={styles.state}>
      <Icon name={icon} size="lg" />
      <h2>{title}</h2>
      <p>{body}</p>
      {action ? (
        <ActionLink href={action.href} variant="standalone" icon="arrow-forward">
          {action.label}
        </ActionLink>
      ) : null}
    </section>
  );
}
