'use client'

import type { Toggle as BaseToggleNS } from '@base-ui/react/toggle'
import type { ToggleGroup as BaseToggleGroupNS } from '@base-ui/react/toggle-group'
import type * as React from 'react'
import { Toggle as BaseToggle } from '@base-ui/react/toggle'
import { ToggleGroup as BaseToggleGroup } from '@base-ui/react/toggle-group'
import { cn } from '../cn'

export type SegmentedControlProps<Value extends string = string> = Omit<
  BaseToggleGroupNS.Props<Value>,
  'className'
> & {
  className?: string
}

export function SegmentedControl<Value extends string = string>({
  className,
  ...props
}: SegmentedControlProps<Value>) {
  return (
    <BaseToggleGroup
      className={cn(
        'inline-flex items-center gap-px rounded-[10px] bg-components-segmented-control-bg-normal p-0.5',
        className,
      )}
      {...props}
    />
  )
}

export type SegmentedControlItemProps<Value extends string = string> = Omit<
  BaseToggleNS.Props<Value>,
  'className'
> & {
  className?: string
}

export function SegmentedControlItem<Value extends string = string>({
  className,
  ...props
}: SegmentedControlItemProps<Value>) {
  return (
    <BaseToggle
      className={cn(
        'relative flex h-7 min-w-0 touch-manipulation items-center justify-center gap-0.5 overflow-hidden rounded-lg border-[0.5px] border-transparent px-2 py-1 system-sm-medium whitespace-nowrap text-text-secondary transition-colors duration-150 hover:bg-state-base-hover hover:text-text-secondary focus-visible:inset-ring-2 focus-visible:inset-ring-state-accent-solid focus-visible:outline-hidden data-disabled:cursor-not-allowed data-disabled:bg-transparent data-disabled:text-text-disabled data-disabled:shadow-none data-disabled:hover:bg-transparent data-disabled:hover:text-text-disabled data-pressed:border-components-segmented-control-item-active-border data-pressed:bg-components-segmented-control-item-active-bg data-pressed:text-text-accent-light-mode-only data-pressed:shadow-xs data-pressed:shadow-shadow-shadow-3 motion-reduce:transition-none',
        className,
      )}
      {...props}
    />
  )
}

export type SegmentedControlDividerProps = Omit<React.ComponentProps<'span'>, 'className'> & {
  className?: string
}

export function SegmentedControlDivider({ className, ...props }: SegmentedControlDividerProps) {
  return (
    <span
      role="presentation"
      aria-hidden="true"
      className={cn('h-3.5 w-px shrink-0 bg-divider-regular', className)}
      {...props}
    />
  )
}
