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

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

const Footer = ({ domain, menu }: FooterProps) => {
  return (
    <footer className='w-full border-t border-border bg-muted/30 mt-auto'>
      <div className='mx-auto max-w-5xl px-4 py-8 sm:px-6 lg:px-8'>
        {/* Single row layout — compact horizontal */}
        <div className='flex flex-col sm:flex-row items-start sm:items-center justify-between gap-6'>

          {/* Brand */}
          <div className='flex items-center gap-3'>
            {domain?.logo ? (
              <Image
                src={getMediaUrl(domain.logo)}
                alt={domain.name || 'Logo'}
                width={200}
                height={60}
                className='object-contain h-12 sm:h-14 w-auto'
              />
            ) : (
              <span className='font-bold text-xl'>{domain?.name || 'My Site'}</span>
            )}
          </div>

          {/* Menu links — single row */}
          {menu && menu.length > 0 && (
            <nav className='flex flex-wrap gap-x-5 gap-y-2'>
              {menu.map((m: any, i: number) => (
                <Link
                  key={i}
                  href={m.url || '#'}
                  className='text-sm text-muted-foreground hover:text-foreground transition-colors'
                >
                  {m.name}
                </Link>
              ))}
            </nav>
          )}

          {/* Social icons */}
          <div className='flex items-center gap-3'>
            {domain?.instagram && (
              <a href={domain.instagram} target='_blank' rel='noopener noreferrer'
                className='text-muted-foreground hover:text-foreground transition-colors'>
                <Icon icon='mdi:instagram' className='w-5 h-5' />
              </a>
            )}
            {domain?.youtube && (
              <a href={domain.youtube} target='_blank' rel='noopener noreferrer'
                className='text-muted-foreground hover:text-foreground transition-colors'>
                <Icon icon='mdi:youtube' className='w-5 h-5' />
              </a>
            )}
            {domain?.tiktok && (
              <a href={domain.tiktok} target='_blank' rel='noopener noreferrer'
                className='text-muted-foreground hover:text-foreground transition-colors'>
                <Icon icon='ic:baseline-tiktok' className='w-5 h-5' />
              </a>
            )}
          </div>
        </div>

        {/* Bottom copyright — one line */}
        {domain?.footer && (
          <div className='mt-6 pt-4 border-t border-border/50'>
            <p className='text-center text-xs text-muted-foreground'>
              <Link href='/' className='hover:underline'>{domain.footer}</Link>
            </p>
          </div>
        )}
      </div>
    </footer>
  )
}

export default Footer