'use client'

import type { ComponentProps } from 'react'

import { ProgressBar } from '@heroui/react'

type ProgressProps = Omit<ComponentProps<typeof ProgressBar>, 'color' | 'children' | 'className'> & {
  color?: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger'
  className?: string
  classNames?: {
    base?: string
    track?: string
    indicator?: string
  }
}

export function Progress({ className, classNames, color = 'primary', ...props }: ProgressProps) {
  const mappedColor = color === 'primary' ? 'accent' : color === 'secondary' ? 'accent' : color

  return (
    <ProgressBar
      className={`${classNames?.base ?? ''} ${className ?? ''}`.trim()}
      color={mappedColor}
      {...props}
    >
      <ProgressBar.Track className={classNames?.track}>
        <ProgressBar.Fill className={classNames?.indicator} />
      </ProgressBar.Track>
    </ProgressBar>
  )
}