import signboard from '../assets/ui/signboard.webp';
import './Signboard.css';

interface Props {
  title: string;
  subtitle?: string;
  meta?: string;
  footer?: string;
  onClick?: () => void;
  variant?: 'hero' | 'hall';
}

export function Signboard({ title, subtitle, meta, footer, onClick, variant = 'hall' }: Props) {
  const className = ['signboard', `signboard--${variant}`, onClick ? 'signboard--clickable' : '']
    .filter(Boolean)
    .join(' ');

  const ribbon = [subtitle, meta, footer].filter(Boolean).join(' · ');

  if (onClick) {
    return (
      <button type="button" className={className} onClick={onClick}>
        <div className="signboard__board">
          <img className="signboard__bg" src={signboard} alt="" aria-hidden="true" />
          <span className="signboard__title">{title}</span>
        </div>
        {ribbon ? <div className="signboard__ribbon">{ribbon}</div> : null}
      </button>
    );
  }

  return (
    <div className={className}>
      <div className="signboard__board">
        <img className="signboard__bg" src={signboard} alt="" aria-hidden="true" />
        <span className="signboard__title">{title}</span>
      </div>
      {ribbon ? <div className="signboard__ribbon">{ribbon}</div> : null}
    </div>
  );
}
