import type { ImageBlock as ImageBlockData } from '@/marketing/cms-types';

const ALIGN_CLASS: Record<NonNullable<ImageBlockData['align']>, string> = {
    left: 'justify-start',
    center: 'justify-center',
};

export default function ImageBlock({ block }: { block: ImageBlockData }) {
    if (!block.imageUrl || block.imageUrl.trim() === '') {
        return null;
    }
    const align = ALIGN_CLASS[block.align ?? 'center'];
    const maxWidth =
        typeof block.maxWidth === 'number' ? `${block.maxWidth}px` : block.maxWidth ?? '100%';

    return (
        <div className={`mt-6 first:mt-0 flex ${align}`}>
            <img
                src={block.imageUrl}
                alt={block.alt ?? ''}
                style={{ maxWidth }}
                className="h-auto w-full rounded-2xl border border-border/60"
            />
        </div>
    );
}
