import { styled } from 'inlines'
import { colors } from '../../utils/colors.js'
import { Text } from '../Text/index.js'
import { radius } from '../../utils/radius.js'

type TabsProps = {
  value?: string
  onChange: (value: string) => void
  tabs: { value: string; label: string }[]
}

function Tabs({ tabs, value, onChange }: TabsProps) {
  return (
    <div
      style={{
        display: 'flex',
        alignItems: 'center',
        gap: 8,
        flexShrink: 0,
      }}
    >
      {tabs.map((tab) => (
        <styled.button
          key={tab.value}
          data-active={tab.value === value ? true : undefined}
          style={{
            flexShrink: 0,
            appearance: 'none',
            outline: 'none',
            overflow: 'hidden',
            border: 'none',
            position: 'relative',
            display: 'inline-flex',
            justifyContent: 'center',
            alignItems: 'center',
            borderRadius: radius[8],
            height: 32,
            padding: '0 10px',

            background: 'transparent',
            color: colors.neutral80,

            '&:hover': {
              background: colors.neutral10Adjusted,
              color: colors.neutral100,
            },

            '&[data-active]': {
              background: colors.neutral10Adjusted,
              color: colors.neutral100,
            },

            '&[data-active]:hover': {
              background: colors.neutral20Adjusted,
              color: colors.neutral100,
            },

            '&:focus-visible': {
              outline: `${colors.neutral20} solid 4px`,
            },

            transition: 'transform 100ms cubic-bezier(0.2,0,0,1)',
            '&:active': {
              transform: 'scale(0.96)',
            },
          }}
          onClick={() => {
            onChange(tab.value)
          }}
        >
          <Text variant="display-medium" color="inherit">
            {tab.label}
          </Text>
        </styled.button>
      ))}
    </div>
  )
}

export { Tabs }
export type { TabsProps }
