import { cn } from '@/lib/utils';

interface IntegrationLogosBarProps {
  className?: string;
}

const coreIntegrations = [
  { name: 'Google Search Console', abbr: 'GSC' },
  { name: 'WordPress', abbr: 'WP' },
  { name: 'OpenAI', abbr: 'AI' },
] as const;

const complementTools = ['Ahrefs', 'Semrush', 'Mangools', 'SE Ranking', 'Yoast', 'Rank Math'];

export function IntegrationLogosBar({ className }: IntegrationLogosBarProps) {
  return (
    <div className={cn('flex flex-col items-center gap-3', className)}>
      <div className="flex items-center justify-center gap-4 flex-wrap">
        <span className="text-sm text-muted-foreground">Connects with</span>
        {coreIntegrations.map((integration) => (
          <div
            key={integration.name}
            className="flex items-center gap-1.5 px-3 py-1.5 rounded-full border border-border bg-card text-xs"
            title={integration.name}
          >
            <span className="font-bold text-muted-foreground">{integration.abbr}</span>
            <span className="text-muted-foreground hidden sm:inline">{integration.name}</span>
          </div>
        ))}
      </div>
      <p className="text-xs text-muted-foreground text-center">
        Complements your existing SEO stack &mdash;{' '}
        {complementTools.join(', ')}, and more
      </p>
    </div>
  );
}