---
interface Props {
  placeholder?: string
  value?: string
  onChange?: (value: string) => void
}

const { placeholder, value, onChange } = Astro.props

let inputValue = value

const handleChange = (event: Event) => {
  const target = event.target as HTMLInputElement
  const newValue = target.value
  setInputValue(newValue)
  if (props.onChange) {
    props.onChange(newValue)
  }
}
---

<input class="dasig-input" type="text" placeholder={props.placeholder} value={inputValue()} onInput={handleChange} />

<style lang="sass">
  .dasig-input
    font-size: 1rem
    padding: 0.5rem 1rem
    width: 100%
    border: 2px solid #ccc
    border-radius: 4px
    outline: none
    transition: border-color 0.3s, box-shadow 0.3s

    &:focus
      border-color: #3377AC
      box-shadow: 0 0 5px rgba(51, 119, 168, 0.3)

    &::placeholder
      color: #888
      font-style: italic

    &:disabled
      background-color: #f0f0f0
      border-color: #ddd

    &--error
      border-color: #ff4d4f
      box-shadow: 0 0 5px rgba(255, 77, 79, 0.3)

      &:focus
        border-color: #e81123
</style>
