import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
import { Input } from "../ui/input";
import { Button } from "../ui/button";
import { Label } from "../ui/label";
import { Switch } from "../ui/switch";
import { Gauge } from "lucide-react";

export function LevelSettingView() {
  return (
    <div className="space-y-4">
      <div className="flex items-center gap-3">
        <Gauge className="w-6 h-6 text-blue-400" />
        <h1 className="text-2xl font-bold text-white">Level Setting</h1>
      </div>

      <Card className="bg-gray-900 border-gray-700">
        <CardHeader>
          <CardTitle className="text-white">Water Level Configuration</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="flex items-center justify-between p-3 bg-gray-800 rounded">
            <Label htmlFor="level-enable" className="text-gray-300">Enable Level Sensor</Label>
            <Switch id="level-enable" defaultChecked />
          </div>

          <div className="grid grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label htmlFor="min-level" className="text-gray-300">Min Level (m)</Label>
              <Input 
                id="min-level"
                type="number"
                defaultValue="0"
                step="0.01"
                className="bg-gray-800 border-gray-700 text-white"
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="max-level" className="text-gray-300">Max Level (m)</Label>
              <Input 
                id="max-level"
                type="number"
                defaultValue="10"
                step="0.01"
                className="bg-gray-800 border-gray-700 text-white"
              />
            </div>
          </div>

          <div className="space-y-2">
            <Label htmlFor="warning-level" className="text-gray-300">Warning Level (m)</Label>
            <Input 
              id="warning-level"
              type="number"
              defaultValue="7.5"
              step="0.01"
              className="bg-gray-800 border-gray-700 text-white"
            />
          </div>

          <div className="space-y-2">
            <Label htmlFor="critical-level" className="text-gray-300">Critical Level (m)</Label>
            <Input 
              id="critical-level"
              type="number"
              defaultValue="9.0"
              step="0.01"
              className="bg-gray-800 border-gray-700 text-white"
            />
          </div>

          <Button className="w-full bg-blue-600 hover:bg-blue-700">
            Save Configuration
          </Button>
        </CardContent>
      </Card>
    </div>
  );
}