import React from 'react'
import styles from '@/app/styles/components/Breadcrumbs.module.css'

export interface BreadcrumbItem {
  label: string
  href?: string
  onClick?: () => void
  isActive?: boolean
}

interface BreadcrumbsProps extends React.HTMLAttributes<HTMLElement> {
  items: BreadcrumbItem[]
  separator?: string | React.ReactNode
  collapsed?: boolean
}

const Breadcrumbs = React.forwardRef<HTMLElement, BreadcrumbsProps>(
  (
    {
      items,
      separator = '/',
      collapsed = false,
      className = '',
      ...props
    },
    ref
  ) => {
    const containerClass = `${styles.breadcrumbs} ${collapsed ? styles['breadcrumbs--collapsed'] : ''} ${className}`.trim()

    return (
      <nav ref={ref} className={containerClass} aria-label="Breadcrumb" {...props}>
        {items.map((item, index) => (
          <React.Fragment key={index}>
            <div className={styles.breadcrumb}>
              {item.href || item.onClick ? (
                <a
                  href={item.href || '#'}
                  className={styles.breadcrumb__link}
                  onClick={(e) => {
                    if (item.onClick) {
                      e.preventDefault()
                      item.onClick()
                    }
                  }}
                >
                  {item.label}
                </a>
              ) : (
                <span className={styles.breadcrumb__label}>{item.label}</span>
              )}
            </div>
            {index < items.length - 1 && (
              <span className={styles.breadcrumb__separator} aria-hidden="true">
                {separator}
              </span>
            )}
          </React.Fragment>
        ))}
      </nav>
    )
  }
)

Breadcrumbs.displayName = 'Breadcrumbs'

export default Breadcrumbs