'use client';

import * as React from 'react';
import { ChevronDown, ChevronRight, Home } from 'lucide-react';

import * as Dropdown from '@/components/ui/dropdown';
import Link from 'next/link';

type BreadcrumbItem = {
  label: string;
  href: string;
  items?: BreadcrumbItem[];
};

export default function NestedCategoryBreadcrumbs() {
  const breadcrumbs: BreadcrumbItem[] = [
    {
      label: 'Products',
      href: '/products',
      items: [
        { label: 'Products', href: '/products' },
        { label: 'Books', href: '/products/books' },
        { label: 'Sports', href: '/products/sports' },
      ],
    },
    {
      label: 'Electronics',
      href: '/electronics',
      items: [
        { label: 'Electronics', href: '/electronics' },
        { label: 'House', href: '/electronics/house' },
        { label: 'Technology', href: '/electronics/technology' },
      ],
    },
  ];

  return (
    <nav className='flex items-center justify-center gap-2'>
      <Link href='/' className='text-text-soft-400 hover:text-text-sub-600'>
        <Home onClick={(e) => e.preventDefault()} className='size-4' />
      </Link>

      {breadcrumbs.map((item, index) => (
        <React.Fragment key={item.href}>
          <span className='text-label-xs text-text-soft-400 cursor-default'>
            /
          </span>

          {item.items ? (
            <Dropdown.Root>
              <Dropdown.Trigger asChild>
                <button
                  className='group text-label-xs text-text-soft-400 hover:text-text-sub-600 flex items-center gap-1'
                  onClick={(e) => e.preventDefault()}
                >
                  <span className='group-data-[state=open]:text-text-sub-600'>
                    {item.label}
                  </span>
                  <span className='group-data-[state=open]:bg-bg-weak-50 rounded-full'>
                    <ChevronDown className='group-data-[state=open]:text-text-sub-600 size-4 transition-transform duration-200 group-data-[state=open]:rotate-180' />
                  </span>
                </button>
              </Dropdown.Trigger>
              <Dropdown.Content
                align='start'
                className='w-[148px] gap-0.5 rounded-[10px] p-1'
              >
                {item.items.map((subItem) => (
                  <Dropdown.Item key={subItem.href} asChild>
                    <button
                      onClick={(e) => e.preventDefault()}
                      className='group hover:bg-bg-weak-50 relative flex w-full items-center justify-between rounded-[6px] py-1 pr-1 pl-1.5'
                    >
                      <span className='text-label-xs text-text-sub-600'>
                        {subItem.label}
                      </span>
                      <ChevronRight className='text-text-soft-400 size-4 opacity-0 transition-opacity group-hover:opacity-100' />
                    </button>
                  </Dropdown.Item>
                ))}
              </Dropdown.Content>
            </Dropdown.Root>
          ) : (
            <button
              onClick={(e) => e.preventDefault()}
              className='text-label-xs text-text-soft-400 hover:text-text-sub-600'
            >
              {item.label}
            </button>
          )}
        </React.Fragment>
      ))}
    </nav>
  );
}