---
import { Icon } from 'astro-icon/components';
import type { Brands as Props } from 'types';

import Image from 'components/common/Image.astro';
import Headline from 'components/ui/Headline.astro';
import WidgetWrapper from 'components/ui/WidgetWrapper.astro';
const {
  title = '',
  subtitle = '',
  tagline = '',
  icons = [],
  images = [],
  id,
  isDark = false,
  classes = {},
  bg = await Astro.slots.render('bg'),
} = Astro.props;
---

<WidgetWrapper id={id} isDark={isDark} containerClass={`max-w-6xl mx-auto ${classes?.container ?? ''}`} bg={bg}>
  <Headline title={title} subtitle={subtitle} tagline={tagline} />

  <div class="flex flex-wrap justify-center gap-x-6 sm:gap-x-12 lg:gap-x-24">
    {icons && icons.map((icon) => <Icon name={icon} class="py-3 lg:py-5 w-12 h-auto mx-auto sm:mx-0 text-gray-500" />)}
    {
      images &&
        images.map(
          (image) =>
            image.src && (
              <div class="flex justify-center col-span-1 my-2 lg:my-4 py-1 px-3 rounded-md dark:bg-gray-200">
                <Image src={image.src} alt={image.alt || ''} class="max-h-12" width={120} height={48} layout="fixed" />
              </div>
            )
        )
    }
  </div>
</WidgetWrapper>