import { Img } from '../../ui-kit/Img/Img';
import { RichText } from '../../ui-kit/RichText/RichText';
import { Text } from '../../ui-kit/Text/Text';
import { type AtmsDef, type ItemList } from './OfficesAtmsMapContent';

export const renderDescriptionBlock = ({ __html, list, richVersion }: AtmsDef) =>
  __html || list?.length ? (
    <div className="border-b sm:border border-main-divider rounded-md space-y-2xl">
      {__html ? <RichText __html={__html} richVersion={richVersion} /> : null}
      {list?.length ? (
        <div className="flex flex-col sm:flex-row gap-2xl sm:flex-wrap pb-2xl sm:pb-xl">
          {list.map(renderItem)}
        </div>
      ) : null}
    </div>
  ) : null;

const renderItem = (item: ItemList, i: number) => (
  <div key={String(i)} className="flex gap-xs items-center">
    <Img image={item.image} />
    {item?.text ? (
      <Text size="text-m" font="font-light">
        {item.text}
      </Text>
    ) : null}
  </div>
);