import type { CmsSlot } from '@/components/cms/types';

const ALIGN_CLASS: Record<string, string> = {
  center:   'align-self-center',
  'flex-end': 'align-self-end',
};

export default function CmsElementProductName({ slot }: { slot: CmsSlot }) {
  const content =
    slot.data?.content ??
    slot.config?.content?.value ??
    '';

  if (!content) return null;

  const isStatic = slot.config?.content?.source === 'static';
  const verticalAlign: string | null = slot.config?.verticalAlign?.value ?? null;

  const inner = isStatic ? (
    <span
      itemProp="name"
      dangerouslySetInnerHTML={{ __html: content }}
    />
  ) : (
    <h1
      className="text-2xl font-bold text-surface-900 product-detail-name"
      itemProp="name"
      dangerouslySetInnerHTML={{ __html: content }}
    />
  );

  if (!verticalAlign) return <div className="cms-element-product-name">{inner}</div>;

  return (
    <div className="cms-element-product-name has-vertical-alignment">
      <div className={ALIGN_CLASS[verticalAlign] ?? 'align-self-start'}>
        {inner}
      </div>
    </div>
  );
}