import { useState, ChangeEvent } from 'react'
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"

export default function Component() {
  const [num1, setNum1] = useState('')
  const [operation, setOperation] = useState('')
  const [num2, setNum2] = useState('')
  const [result, setResult] = useState('')

  const handleNum1Change = (e: ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value
    if (value === '' || /^\d+$/.test(value)) {
      setNum1(value)
      calculateResult(value, operation, num2)
    }
  }

  const handleOperationChange = (e: ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value
    if (value === '' || /^[+\-x/]$/.test(value)) {
      setOperation(value)
      calculateResult(num1, value, num2)
    }
  }

  const handleNum2Change = (e: ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value
    if (value === '' || /^\d+$/.test(value)) {
      setNum2(value)
      calculateResult(num1, operation, value)
    }
  }

  const calculateResult = (n1: string, op: string, n2: string) => {
    if (n1 && op && n2) {
      const num1 = parseFloat(n1)
      const num2 = parseFloat(n2)
      let res: number

      switch (op) {
        case '+':
          res = num1 + num2
          break
        case '-':
          res = num1 - num2
          break
        case 'x':
          res = num1 * num2
          break
        case '/':
          res = num2 !== 0 ? num1 / num2 : NaN
          break
        default:
          res = NaN
      }

      setResult(isNaN(res) ? 'Error' : res.toString())
    } else {
      setResult('')
    }
  }

  return (
    <Card className="w-full max-w-sm">
      <CardHeader>
        <CardTitle>Simple Calculator</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="grid w-full items-center gap-4">
          <div className="flex flex-col space-y-1.5">
            <Label htmlFor="num1">Number 1</Label>
            <Input id="num1" value={num1} onChange={handleNum1Change} placeholder="Enter a number" />
          </div>
          <div className="flex flex-col space-y-1.5">
            <Label htmlFor="operation">Operation</Label>
            <Input id="operation" value={operation} onChange={handleOperationChange} placeholder="Enter +, -, x, or /" maxLength={1} />
          </div>
          <div className="flex flex-col space-y-1.5">
            <Label htmlFor="num2">Number 2</Label>
            <Input id="num2" value={num2} onChange={handleNum2Change} placeholder="Enter a number" />
          </div>
          <div className="flex flex-col space-y-1.5">
            <Label htmlFor="result">Result</Label>
            <Input id="result" value={result} readOnly />
          </div>
        </div>
      </CardContent>
    </Card>
  )
}