import { JSX, JSXElement } from 'solid-js';
import { COLORS } from 'src/colors';

type SSCalloutProps = JSX.HTMLAttributes<HTMLDivElement> & {
  color: (typeof COLORS)[number];
  icon: JSXElement;
};

function SSCallout(props: SSCalloutProps) {
  const { icon, color, class: className, style, children, ...rest } = props;

  return (
    <div
      {...rest}
      class={`ss_callout ss_callout--${color} ${className ?? ''}`}
      style={style}
    >
      <span class="ss_callout__icon">
        {icon}
      </span>
      <div class="ss_callout__content">
        <span>{children}</span>
      </div>
    </div>
  );
}

export { SSCallout };