import type { EyebrowBlock as EyebrowBlockData } from '@/marketing/cms-types';

const WRAPPER_ALIGN: Record<NonNullable<EyebrowBlockData['align']>, string> = {
    left: 'text-left',
    center: 'text-center',
};

export default function EyebrowBlock({ block }: { block: EyebrowBlockData }) {
    if (!block.text || block.text.trim() === '') {
        return null;
    }
    const align = WRAPPER_ALIGN[block.align ?? 'left'];

    return (
        <div className={`mt-6 first:mt-0 ${align}`}>
            <span className="ms-badge inline-flex items-center rounded-full bg-accent px-4 py-1.5 text-xs font-semibold uppercase tracking-wider text-accent-foreground">
                {block.text}
            </span>
        </div>
    );
}
