import { Badge } from '@gib/ui';

import type { LandingLogoCloudContent } from './content';

interface LogoCloudProps {
  content: LandingLogoCloudContent;
}

export const LogoCloud = ({ content }: LogoCloudProps) => (
  <section className='border-border/40 bg-muted/25 border-y'>
    <div className='container mx-auto px-4 py-12'>
      <div className='mx-auto max-w-6xl'>
        <p className='text-muted-foreground mb-6 text-center text-sm font-medium tracking-[0.28em] uppercase'>
          {content.heading}
        </p>
        <div className='flex flex-wrap items-center justify-center gap-3 md:gap-4'>
          {content.items.map((logo) => (
            <div
              key={logo.name}
              className='bg-background/80 border-border/60 flex min-w-40 items-center justify-between gap-4 rounded-2xl border px-4 py-3 shadow-sm'
            >
              <span className='text-sm font-semibold tracking-[0.18em] uppercase'>
                {logo.name}
              </span>
              <Badge variant='outline'>{logo.accent}</Badge>
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>
);
