'use client'

import type { ReactNode } from 'react'

import { forwardRef } from 'react'

import Button from '@/components/formElements/Button'
import { cn } from '@/lib/cn'

interface ConsumerPickerTriggerProps {
  'aria-label': string
  children: ReactNode
  className?: string
  disabled?: boolean
  icon?: ReactNode
  onClick: () => void
}

/**
 * Common consumer trigger for controls that open a selection modal.
 * It deliberately only owns the visual affordance; the date, time, and map
 * pickers remain responsible for their own value and modal state.
 */
const ConsumerPickerTrigger = forwardRef<HTMLButtonElement, ConsumerPickerTriggerProps>(
  ({ 'aria-label': ariaLabel, children, className, disabled, icon, onClick }, ref) => (
    <Button
      ref={ref}
      fullWidth
      aria-label={ariaLabel}
      className={cn(
        'consumer-focus-ring flex h-12 items-center justify-center gap-2 rounded-xl bg-[#E2E2E280] px-2 text-xs font-medium text-tertiary-900 transition-colors hover:bg-[#e2e2e2b3] disabled:cursor-not-allowed disabled:opacity-50',
        className
      )}
      disabled={disabled}
      variant="flat"
      onClick={onClick}
    >
      {icon ? (
        <span
          aria-hidden
          className="flex size-5 shrink-0 items-center justify-center [&>svg]:size-5"
        >
          {icon}
        </span>
      ) : null}
      <span className="min-w-0 truncate">{children}</span>
    </Button>
  )
)

ConsumerPickerTrigger.displayName = 'ConsumerPickerTrigger'

export default ConsumerPickerTrigger