import * as React from 'react'

import { cn } from './utils'

/* ------------------------------------------------------------------ */
/* StatusBar                                                           */
/* ------------------------------------------------------------------ */

function StatusBar({ className, children, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="status-bar"
      className={cn(
        'flex h-8 items-center justify-between border-t border-border-glass bg-glass px-3 text-xs backdrop-blur-[20px]',
        className
      )}
      {...props}
    >
      {children}
    </div>
  )
}

/* ------------------------------------------------------------------ */
/* StatusBarSection                                                     */
/* ------------------------------------------------------------------ */

interface StatusBarSectionProps extends React.ComponentProps<'div'> {
  /** Which slot this section occupies */
  position?: 'left' | 'center' | 'right'
}

function StatusBarSection({ className, position = 'left', ...props }: StatusBarSectionProps) {
  return (
    <div
      data-slot="status-bar-section"
      data-position={position}
      className={cn(
        'flex items-center gap-3',
        position === 'left' && 'mr-auto',
        position === 'center' && 'mx-auto',
        position === 'right' && 'ml-auto',
        className
      )}
      {...props}
    />
  )
}

/* ------------------------------------------------------------------ */
/* StatusBarItem                                                       */
/* ------------------------------------------------------------------ */

function StatusBarItem({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="status-bar-item"
      className={cn(
        'flex items-center gap-1.5 text-foreground-secondary transition-colors hover:text-foreground',
        className
      )}
      {...props}
    />
  )
}

/* ------------------------------------------------------------------ */
/* StatusBarSeparator                                                   */
/* ------------------------------------------------------------------ */

function StatusBarSeparator({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="status-bar-separator"
      className={cn('h-3.5 w-px bg-border-glass', className)}
      {...props}
    />
  )
}

export { StatusBar, StatusBarSection, StatusBarItem, StatusBarSeparator }
