import type { ComponentChildren, JSX } from 'preact';
import { cn } from './cn';

export type NoticeVariant = 'neutral' | 'primary' | 'success' | 'danger' | 'warning';

export type NoticeProps = JSX.HTMLAttributes<HTMLDivElement> & {
  variant?: NoticeVariant;
  icon?: ComponentChildren;
  title?: ComponentChildren;
};

const NOTICE_VARIANTS: Record<NoticeVariant, string> = {
  neutral: 'ask-border-borderSubtle ask-bg-surfaceAlt ask-text-textMuted',
  primary: 'ask-border-primary/20 ask-bg-primarySoft ask-text-text',
  success: 'ask-border-success/20 ask-bg-success/5 ask-text-text',
  danger: 'ask-border-danger/20 ask-bg-danger/5 ask-text-danger',
  warning: 'ask-border-warning/25 ask-bg-warning/10 ask-text-text',
};

export function Notice({ className, children, variant = 'neutral', icon, title, ...props }: NoticeProps) {
  return (
    <div
      className={cn(
        'ask-notice ask-rounded-2xl ask-border ask-p-3 ask-text-[12px] ask-leading-5',
        NOTICE_VARIANTS[variant],
        className,
      )}
      {...props}
    >
      <div className="ask-flex ask-items-start ask-gap-2.5">
        {icon ? <span className="ask-mt-0.5 ask-flex ask-shrink-0 ask-items-center ask-justify-center">{icon}</span> : null}
        <div className="ask-min-w-0 ask-flex-1">
          {title ? <div className="ask-mb-0.5 ask-text-[12px] ask-font-semibold ask-text-textMain">{title}</div> : null}
          {children}
        </div>
      </div>
    </div>
  );
}
