'use client';

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

import * as LinkButton from '@/components/ui/link-button';
import Link from 'next/link';

type BreadcrumbItem = {
  label: string;
  href: string;
};

export default function DashboardReportsBreadcrumbs() {
  const breadcrumbs: BreadcrumbItem[] = [
    { label: 'Dashboard', href: '/dashboard' },
    { label: 'Analytics', href: '/dashboard/analytics' },
    { label: 'Reports', href: '/dashboard/analytics/reports' },
  ];

  const handleClick = (e: React.MouseEvent) => {
    e.preventDefault();
  };

  return (
    <nav className='bg-bg-weak-50 flex items-center gap-1.5 rounded-lg px-2.5 py-2'>
      <Link href='/' onClick={handleClick}>
        <Home className='text-text-sub-600 hover:text-text-strong-950 size-4' />
      </Link>
      {breadcrumbs.length > 0 && (
        <ChevronRight className='text-text-soft-400 size-4 cursor-default' />
      )}

      {breadcrumbs.map((item, index) => (
        <React.Fragment key={item.href}>
          <LinkButton.Root
            asChild
            variant='gray'
            size='small'
            className='hover:text-text-strong-950'
            onClick={handleClick}
          >
            <a href={item.href}>{item.label}</a>
          </LinkButton.Root>
          {index < breadcrumbs.length - 1 && (
            <ChevronRight className='text-text-soft-400 size-4 cursor-default' />
          )}
        </React.Fragment>
      ))}
    </nav>
  );
}