import clsx from '../../../utils/clsx';
import { Text } from '../../atoms';

const Note = ({
    id,
    style,
    className = '',
    type = 'info',
    rounded = 'md',
    children,
}) => {
    return (
        <ul
            id={id}
            style={style}
            className={clsx(
                'rbfb-note',
                `rbfb-note--${type}`,
                `rounded-${rounded}`,
                className,
            )}
        >
            {children}
        </ul>
    );
};

Note.Bullet = ({ children }) => {
    return <li className="rbfb-note__bullet">{children}</li>;
};

Note.Normal = ({ children }) => {
    return <li className="rbfb-note__normal">{children}</li>;
};

Note.Title = ({ title }) => {
    return (
        <Text as="span" size="xs" weight="semibold">
            {title}{' '}
        </Text>
    );
};

Note.Text = ({ children }) => {
    return <>{children}</>;
};

Note.Link = ({ url, children }) => {
    return (
        <a
            href={url}
            target="_blank"
            rel="noopener noreferrer"
            className="rbfb-note__link"
        >
            {children}
        </a>
    );
};

export default Note;
