import React, { useState } from 'react'


export default function BinaryDecimalConverter() {
    const [binary, setBinary] = useState('')
    const [result, setResult] = useState('')
    const [isSuccess, setIsSuccess] = useState(false)


    const handleConvert = () => {
        if (binary.length === 0) {
            setResult('Please enter a binary number using only 0s and 1s.')
            setIsSuccess(false)
            return
        }


        if (!/^[01]+$/.test(binary)) {
            setResult('Invalid input! A binary number can contain only 0s and 1s.')
            setIsSuccess(false)
            return
        }


        const decimal = parseInt(binary, 2)


        setResult(`Decimal Value: ${decimal}`)
        setIsSuccess(true)
    }


    return (
        <>
            <div className="main-wrapper flex flex-col items-center w-full min-h-screen px-4 md:px-8 py-8">
                <h1 className="text-xl md:text-2xl lg:text-3xl font-bold mb-6">
                    Binary to Decimal Converter
                </h1>
                <h2 className="text-sm md:text-base text-gray-600 text-center max-w-lg leading-relaxed mb-6">
                    Convert binary numbers <span className="font-semibold text-blue-600">(e.g., 1010 → 10)</span> into decimal values.
                </h2>


                <div className="w-full max-w-md flex flex-col gap-4">
                    <div className="relative">
                        <input
                            type="text"
                            placeholder="Enter Binary Number"
                            value={binary}
                            onChange={(e) => setBinary(e.target.value)}
                            className="w-full border border-gray-300 rounded-lg px-4 py-3 pr-10 outline-none shadow-[0_2px_10px_rgba(59,130,246,0.15)]"
                        />


                        {binary && (
                            <button
                                title="Clear"
                                onClick={() => {
                                    setBinary('')
                                    setResult('')
                                }}
                                className="absolute right-3 top-1/2 -translate-y-1/2 text-red-500 font-bold"
                            >
                                ✕
                            </button>
                        )}
                    </div>


                    <button
                        onClick={handleConvert}
                        className="convert-btn bg-blue-600 text-white py-3 rounded-lg text-base md:text-lg lg:text-xl font-semibold"
                    >
                        Convert
                    </button>


                    {result && (
                        <p
                            className={`text-lg font-medium text-center p-3 rounded-lg ${isSuccess
                                ? 'bg-green-100 text-green-700 border border-green-300'
                                : 'bg-red-100 text-red-700 border border-red-300'
                                }`}
                        >
                            {result}
                        </p>
                    )}
                </div>
            </div>
        </>
    )
}