import React, { FC, ReactNode } from 'react'
import { Icon, __experimentalItem as Item } from '@wordpress/components'
import { chevronRight } from '@wordpress/icons'
import { Badge, Stack, Text } from '@wordpress/ui'
import { useI18n } from '@wordpress/react-i18n'

export declare interface SettingsRowProps {
  icon: React.ComponentProps<typeof Icon>['icon']
  title: string
  description?: ReactNode
  on?: boolean
  onClick?: () => void
  children?: ReactNode
  extra?: ReactNode
}

const SettingsRow: FC<SettingsRowProps> = ({
  icon,
  title,
  description,
  on,
  onClick,
  children,
  extra,
}) => {
  const { __ } = useI18n()

  return (
    <Item className="settings-row" onClick={onClick}>
      <Stack direction="row" align="center" gap="lg">
        <Icon icon={icon} size={20} className="settings-row__icon" />
        <Stack direction="column" gap="xs" className="settings-row__text">
          <Stack direction="row" align="center" gap="sm">
            <Text variant="body-md">{title}</Text>
            {on !== undefined && (
              <Badge intent={on ? 'stable' : 'none'}>
                {on
                  ? __('On', 'posten-bring-checkout')
                  : __('Off', 'posten-bring-checkout')}
              </Badge>
            )}
          </Stack>
          {description && (
            <div className="settings-row__description">{description}</div>
          )}
        </Stack>
        {children}
        {onClick && <Icon icon={chevronRight} size={20} />}
      </Stack>
      {extra && <div className="settings-row__extra">{extra}</div>}
    </Item>
  )
}

export default SettingsRow