'use client'
import { House, MapPinned } from 'lucide-react'
import Link from 'next/link'
import { useState } from 'react'

const tabs = [
  {
    id: 'catalogue',
    label: 'Catalogue',
    link:'/catalogue',
    icon: (active: boolean) => (
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
        <rect x="3" y="3" width="7" height="7" rx="1.5" fill={active ? '#1c4d18' : '#B0B0C0'} />
        <rect x="14" y="3" width="7" height="7" rx="1.5" fill={active ? '#1c4d18' : '#B0B0C0'} />
        <rect x="3" y="14" width="7" height="7" rx="1.5" fill={active ? '#1c4d18' : '#B0B0C0'} />
        <rect x="14" y="14" width="7" height="7" rx="1.5" fill={active ? '#1c4d18' : '#B0B0C0'} />
      </svg>
    ),
  },
  {
    id: 'products',
    label: 'Products',
    link:'/price',
    icon: (active: boolean) => (
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
        <rect x="4" y="3" width="16" height="2" rx="1" fill={active ? '#1c4d18' : '#B0B0C0'} />
        <rect x="4" y="7" width="16" height="2" rx="1" fill={active ? '#1c4d18' : '#B0B0C0'} />
        <rect x="4" y="11" width="10" height="2" rx="1" fill={active ? '#1c4d18' : '#B0B0C0'} />
        <rect x="3" y="15" width="18" height="6" rx="1.5" fill="none" stroke={active ? '#1c4d18' : '#B0B0C0'} strokeWidth="1.5" />
        <path d="M7 18h10" stroke={active ? '#1c4d18' : '#B0B0C0'} strokeWidth="1.5" strokeLinecap="round" />
      </svg>
    ),
  },
  {
    id: 'home',
    label: 'Home',
    link:'/',
    icon: (_active: boolean) => null,
    isCenter: true,
  },
  {
    id: 'sales',
    label: 'Sales',
    link:'/sales-network',
    icon: (active: boolean) => (
      <MapPinned className={active?'text-green-800 ':'text-gray-300'}></MapPinned>
    ),
  },
  {
    id: 'contact',
    label: 'Contact',
    link:'/contact',
    icon: (active: boolean) => (
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
        <circle cx="12" cy="12" r="3" stroke={active ? '#1c4d18' : '#B0B0C0'} strokeWidth="1.8" />
        <path
          d="M12 2v2M12 20v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M2 12h2M20 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"
          stroke={active ? '#1c4d18' : '#B0B0C0'}
          strokeWidth="1.8"
          strokeLinecap="round"
        />
      </svg>
    ),
  },
]

export default function BottomNavbar() {
  const [active, setActive] = useState('catalogue')

  return (
    <div className='lg:hidden block'>
        <div className="fixed bottom-0 w-full flex items-end justify-center z-40">
      <div className="w-full bg-white relative" style={{ borderRadius: '24px 24px 0 0', boxShadow: '0 -4px 24px rgba(91,79,233,0.10)' }}>
        <div className="absolute left-1/2 -translate-x-1/2 -top-5 flex items-center justify-center z-10">
          <Link href={'/'}
            onClick={() => setActive('home')}
            className="w-15 h-15 rounded-full flex items-center justify-center transition-all duration-200"
            style={{
              background: active === 'home'
                ? 'linear-gradient(135deg, #1c4d18 0%,  #00704D 100%)'
                : 'linear-gradient(135deg, #1c4d18 0%, #00704D 100%)',
              boxShadow: '0 4px 18px rgba(91,79,233,0.45)',
            }}
          >
            <House className='stroke-white w-7 h-7'></House>
          </Link>
        </div>

        <div className="flex items-end pt-1 pb-2 px-2">
          {tabs.map((tab) => {
            if (tab.isCenter) {
              return (
                <div key={tab.id} className="flex-1 flex flex-col items-center pb-1">
                  <div className="h-10" />
                  <span
                    className="text-xs mt-1 font-medium"
                    style={{ color: active === tab.id ? '#1c4d18' : '#B0B0C0' }}
                  >
                    {tab.label}
                  </span>
                </div>
              )
            }

            const isActive = active === tab.id
            return (
              <button
                key={tab.id}
                onClick={() => setActive(tab.id)}
                className="flex-1 flex flex-col items-center gap-1 py-1 transition-all duration-150 bg-transparent border-none outline-none cursor-pointer"
              >
               <Link href={tab.link}>
                <div className="h-7 flex items-center justify-center">
                  {tab.icon(isActive)}
                </div>
                <span
                  className="text-xs font-medium"
                  style={{ color: isActive ? '#1c4d18' : '#B0B0C0' }}
                >
                  {tab.label}
                </span>
               </Link>
              </button>
            )
          })}
        </div>
      </div>
    </div>
    </div>
  )
}