import { BlockTitle } from 'features/MatchPopup/styled'
import { T9n } from 'features/T9n'

import {
  Wrapper,
  InputsWrapper,
  Input,
  Label,
} from './styled'
import type { Props } from './hooks'
import { useInputHandlers } from './hooks'

export const EpisodeDurationInputs = (props: Props) => {
  const {
    duration,
    handleBlur,
    handleChange,
  } = useInputHandlers(props)
  return (
    <Wrapper>
      <BlockTitle>
        <T9n t='episode_duration' />
      </BlockTitle>
      <InputsWrapper>
        <Label>
          <T9n t='sec_before' />
          <Input
            value={duration.before}
            onChange={handleChange('before')}
            onBlur={handleBlur}
          />
        </Label>
        <Label>
          <T9n t='sec_after' />
          <Input
            value={duration.after}
            onChange={handleChange('after')}
            onBlur={handleBlur}
          />
        </Label>
      </InputsWrapper>
    </Wrapper>
  )
}