'use client'

import React, { useState } from 'react'
import TextInput from './ui/TextInput'
import Button from './ui/Button'

export default function AddressSelector() {
  const [fromAddress, setFromAddress] = useState('')
  const [toAddress, setToAddress] = useState('')

  return (
    <div className="bg-white rounded-xl shadow-lg p-4 sm:p-6 w-full my-2 sm:my-4">
      <div className="flex flex-col sm:flex-row sm:items-end gap-4 sm:gap-3">
        <div className="w-full sm:flex-[3] min-w-0 sm:px-1">
          <TextInput
            placeholder="Минск, Беларусь"
            tooltip="Укажите пункт (Город/Страна), откуда необходимо забрать посылку."
            label="Забрать посылку из"
            value={fromAddress}
            handleChange={(e) => setFromAddress(e.target.value)}
            name="fromAddress"
            style="main"
          />
        </div>
        <div className="w-full sm:flex-[3] min-w-0 sm:px-1">
          <TextInput
            placeholder="Москва, Россия"
            label="Доставить посылку в"
            tooltip="Укажите пункт (Город/Страна), куда необходимо доставить посылку."
            value={toAddress}
            handleChange={(e) => setToAddress(e.target.value)}
            name="toAddress"
            style="main"
          />
        </div>
        <Button
          text="Найти перевозчика"
          className="w-full sm:w-auto sm:flex-1 whitespace-nowrap bg-orange hover:bg-orange/80 text-white p-4"
        />
        <Button
          text="Найти посылку"
          className="w-full sm:w-auto sm:flex-1 whitespace-nowrap bg-gray-100 hover:bg-gray-200 text-gray-800 p-4"
        />
      </div>
    </div>
  )
}