import Link from 'next/link'
import Image from 'next/image'
import { getMediaUrl } from '@/lib/api'
import Logo from '@/components/logo'
import { Icon } from '@iconify/react'

type FooterProps = {
  domain?: any
  menu?: any[]
}

const Footer = ({ domain, menu }: FooterProps) => {
  // Split dynamic menu into two columns if available, else use defaults matching design
  const defaultCol1 = [
    { name: 'About', url: '#' },
    { name: 'Features', url: '#' },
    { name: 'Works', url: '#' },
    { name: 'Career', url: '#' },
  ]
  const defaultCol2 = [
    { name: 'Customer Support', url: '#' },
    { name: 'Delivery Details', url: '#' },
    { name: 'Terms & Conditions', url: '#' },
    { name: 'Privacy Policy', url: '#' },
  ]

  const col1Menu = menu && menu.length > 0 ? menu.slice(0, Math.ceil(menu.length / 2)) : [];
  const col2Menu = menu && menu.length > 0 ? menu.slice(Math.ceil(menu.length / 2)) : [];

  return (
    <footer className="w-full bg-background border-t border-gray-100 mt-auto">
      <div className="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 lg:gap-8">
          {/* Column 1: Brand & Description */}
          <div className="col-span-1">
            <Link href="/" className="inline-flex items-center gap-3 mb-6">
              {domain?.logo ? (
                <Image
                  src={getMediaUrl(domain.logo)}
                  alt={domain.name || 'Logo'}
                  width={150}
                  height={40}
                  className="object-contain"
                />
              ) : (
                <Logo className="gap-2" />
              )}
            </Link>
            <p className="text-gray-500 text-[14px] leading-relaxed mb-8 whitespace-pre-line">
              {domain?.short_profile || domain?.short_description || 'An open-source collection of copy-and-paste shadcn components, blocks, and templates - paired with a powerful theme generator to craft, customize, and ship faster.'}
            </p>
            
            {/* <div className="flex items-center gap-4">
              {
                domain?.instagram && (
                   <Link href={domain?.instagram || '#'} target="_blank" rel="noopener noreferrer" className="text-gray-400 hover:text-black transition-colors">
                    <Icon icon="mdi:instagram" className="w-6 h-6" />
                  </Link>
                )
              }
              {domain?.twitter && (
                <Link href={domain?.twitter || '#'} target="_blank" rel="noopener noreferrer" className="text-gray-400 hover:text-black transition-colors">
                  <Icon icon="mdi:twitter" className="w-6 h-6" />
                </Link>
              )}
              {domain?.youtube && (
                <Link href={domain?.youtube || '#'} target="_blank" rel="noopener noreferrer" className="text-gray-400 hover:text-black transition-colors">
                  <Icon icon="mdi:youtube" className="w-6 h-6" />
                </Link>
              )}
            </div> */}
          </div>

          {/* Column 2: Company */}
          <div className="lg:pl-8">
            <ul className="space-y-4">
              {col1Menu.map((m: any, idx: number) => (
                <li key={idx}>
                  <Link href={m.url || '#'} className="text-[15px] text-gray-500 hover:text-gray-900 transition-colors font-medium">
                    {m.name}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Column 3: Help */}
          <div>
            <ul className="space-y-4">
              {col2Menu.map((m: any, idx: number) => (
                <li key={idx}>
                  <Link href={m.url || '#'} className="text-[15px] text-gray-500 hover:text-gray-900 transition-colors font-medium">
                    {m.name}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Column 4: Newsletter */}
          <div className="col-span-1">
            <div className="flex flex-wrap gap-x-6 gap-y-4 items-center opacity-50 grayscale">
                 <div className="flex items-center gap-4">
                  {
                    domain?.instagram && (
                      <Link href={domain?.instagram || '#'} target="_blank" rel="noopener noreferrer" className="text-gray-400 hover:text-black transition-colors">
                        <Icon icon="mdi:instagram" className="w-8 h-8" />
                      </Link>
                    )
                  }
                  {domain?.twitter && (
                    <Link href={domain?.twitter || '#'} target="_blank" rel="noopener noreferrer" className="text-gray-400 hover:text-black transition-colors">
                      <Icon icon="mdi:twitter" className="w-8 h-8" />
                    </Link>
                  )}
                  {domain?.youtube && (
                    <Link href={domain?.youtube || '#'} target="_blank" rel="noopener noreferrer" className="text-gray-400 hover:text-black transition-colors">
                      <Icon icon="mdi:youtube" className="w-8 h-8" />
                    </Link>
                  )}
                </div>
            </div>
          </div>
          
        </div>
      </div>

      <div className="border-t border-gray-100 py-6 px-4 bg-white">
        <p className="text-center text-[14px] text-gray-900 font-bold">
          <span>
            {/* {`©${new Date().getFullYear()}`}{' '} */}
            <Link href='/#' className='hover:underline'>
              {domain?.footer}
            </Link>
          </span>
        </p>
      </div>
    </footer>
  )
}

export default Footer