import React from 'react'
import Image from 'next/image'
import { SectionLabel, Text } from '@/components/ui'
import type { EcosystemItem } from '@/types/about'

interface ConnectedEcosystemProps {
  badge: string
  title: string
  description: string
  items: EcosystemItem[]
}

export const ConnecteDecosystem = ({ badge, title, description, items }: ConnectedEcosystemProps) => {
  const verticalLines = [
    'left-1/2 sm:left-1/3 lg:left-1/4',
    'hidden sm:left-2/3 sm:block lg:left-2/4',
    'hidden lg:left-3/4 lg:block',
  ]
  const horizontalLines = [
    'top-[25%] sm:top-[33.33%] lg:top-[50%]',
    'top-[50%] sm:top-[66.66%] lg:hidden',
    'top-[75%] sm:hidden',
  ]

  return (
    <section className='py-20 md:py-24 xl:py-[150px] bg-[#F5F5F5]'>
      <div className='container'>
        <div className='flex-center flex-col text-center'>
          <SectionLabel
            label={badge}
            title={<span dangerouslySetInnerHTML={{ __html: title.replace('<span>', '<span class="text-secondary">') }} />}
            description={description}
            textclass='text-center mx-auto'
            className='flex-center flex-col'
          />
        </div>

        <div className='stackinline flex-center'>
          <div className='max-w-7xl w-full relative'>
            <div className='grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4'>
              {items.map((item, i) => (
                <div
                  key={`${item.ecosystem_title}-${i}`}
                  className='flex flex-col items-center justify-center gap-4 py-10 px-6'
                >
                  {item.ecosystem_icon.url && (
                    <Image
                      src={item.ecosystem_icon.url}
                      alt={item.ecosystem_icon.alt || item.ecosystem_title}
                      width={100}
                      height={100}
                      className='w-[100px] h-[100px] object-contain'
                    />
                  )}
                  <Text size='normal' fontWeight={500}>{item.ecosystem_title}</Text>
                </div>
              ))}
            </div>

            <div className='pointer-events-none absolute inset-0 h-full w-full'>
              {horizontalLines.map((position) => (
                <div key={position} className={`absolute inset-x-0 ${position} h-px w-full bg-[linear-gradient(270deg,#F5F5F5_0%,#E7E7E7_25%,#E7E7E7_75%,#F5F5F5_100%)]`} />
              ))}
              {verticalLines.map((position) => (
                <div key={position} className={`absolute inset-y-0 ${position} h-full w-px self-stretch bg-[linear-gradient(180deg,#F5F5F5_0%,#E7E7E7_32.39%,#E7E7E7_67.52%,#F5F5F5_100%)]`} />
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}