import React from 'react'
import styled from 'styled-components'
import { Text, Input } from '@pancakeswap/uikit'
import { useTranslation } from 'contexts/Localization'

const PriceContent = styled.div`
  background: rgba(238, 234, 244, 0.39);
  border: 1px solid #d7caec;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.16);
  border-radius: 18px;
  padding: 20px 20px 25px 20px;
  margin-top: 30px;
`
const CoinText = styled(Text)`
  font-size: 18px;
  color: #333333;
  text-align: left;
  margin-bottom: 20px;
`

interface ExchangeInputProps {
  name: string
  value?: number | string
  disabled?: boolean
  onChange: (e: React.FormEvent<HTMLInputElement>) => void
}

const ExchangeInput: React.FC<ExchangeInputProps> = ({ name, value, onChange, disabled = true }) => {
  const { t } = useTranslation()

  return (
    <PriceContent>
      <CoinText>{name}</CoinText>
      <Input
        value={value}
        placeholder={t('Please enter the amount')}
        onChange={onChange}
        type="number"
        disabled={disabled}
      />
    </PriceContent>
  )
}

export default ExchangeInput