import { cva, RecipeVariantProps } from '@/styled-system/css'
import { useTranslation } from 'react-i18next'

const controlBarRegion = cva({
  base: {
    display: 'flex',
    alignItems: 'center',
    flex: '1 1 33%',
    justifyContent: 'center',
    gap: '0.65rem',
  },
  variants: {
    mobile: {
      true: {
        justifyContent: 'center',
        width: '100%',
      },
    },
  },
  defaultVariants: {
    mobile: false,
  },
})

export const CONTROL_BAR_REGION_ID = 'control-bar-region'

export type ControlBarRegionProps = React.HTMLAttributes<HTMLDivElement> &
  RecipeVariantProps<typeof controlBarRegion>

export function ControlBarRegion({
  children,
  mobile,
  ...props
}: ControlBarRegionProps) {
  const { t } = useTranslation('rooms')
  return (
    <div
      role="region"
      id={CONTROL_BAR_REGION_ID}
      aria-label={t('controls.region')}
      className={controlBarRegion({ mobile })}
      {...props}
    >
      {children}
    </div>
  )
}