import type { ReactNode } from 'react';
import { FoxBadgeDot } from '@fox/core/components/fox-badge-dot';
import { FoxIconButton } from '@fox/core/components/fox-icon-button';
import styles from './header-icon-button.module.scss';

interface HeaderIconButtonProps {
  icon: ReactNode;
  /** 글자가 없으므로 이 값이 접근성 이름이 된다. */
  label: string;
  /** 참이면 우상단에 알림 점(FoxBadgeDot)을 얹는다. */
  hasBadge?: boolean;
  onAction?: () => void;
}

/**
 * 헤더 우측 아이콘 버튼(시안 header의 `item`). FoxIconButton을 그대로 쓰고 모양 차이 두 개
 * (radius·아이콘 크기)만 CSS 모듈로 덮는다 — 근거는 module.scss 상단 참고.
 *
 * 배지는 `<button>` 안이 아니라 형제로 둔다. 버튼 안에 넣으면 아이콘 슬롯의 크기 규칙
 * (`__icon > *`가 100%)에 걸려 배지까지 늘어난다.
 */
export function HeaderIconButton({
  icon,
  label,
  hasBadge = false,
  onAction,
}: HeaderIconButtonProps) {
  return (
    <span className={styles.slot}>
      <FoxIconButton
        type="ghost"
        size="md"
        icon={icon}
        label={label}
        className={styles.button}
        onAction={onAction}
      />
      {hasBadge && <FoxBadgeDot className={styles.badge} label="읽지 않은 알림 있음" />}
    </span>
  );
}