import React, { useState } from "react";

import { Button } from "@/components/ui/button";

import { Input } from "@/components/ui/input";

import { Textarea } from "@/components/ui/textarea";

import { Card, CardContent } from "@/components/ui/card";

 

export default function COSHHForm() {

  const [formData, setFormData] = useState({

    site: "",

    date: "",

    substance: "",

    manufacturer: "",

    description: "",

    location: "",

    risks: "",

    controlMeasures: "",

  });

 

  const handleChange = (e) => {

    setFormData({ ...formData, [e.target.name]: e.target.value });

  };

 

  const handleSubmit = () => {

    alert("COSHH Assessment Generated!");

  };

 

  return (

    <div className="max-w-2xl mx-auto p-6">

      <Card>

        <CardContent className="p-4">

          <h2 className="text-xl font-bold mb-4">COSHH Assessment Form</h2>

          <Input name="site" placeholder="Site and Area" onChange={handleChange} className="mb-2" />

          <Input name="date" type="date" onChange={handleChange} className="mb-2" />

          <Input name="substance" placeholder="Substance Name" onChange={handleChange} className="mb-2" />

          <Input name="manufacturer" placeholder="Manufacturer" onChange={handleChange} className="mb-2" />

          <Textarea name="description" placeholder="Describe the activity" onChange={handleChange} className="mb-2" />

          <Textarea name="location" placeholder="Location of process" onChange={handleChange} className="mb-2" />

          <Textarea name="risks" placeholder="Risks to health" onChange={handleChange} className="mb-2" />

          <Textarea name="controlMeasures" placeholder="Control measures" onChange={handleChange} className="mb-2" />

          <Button onClick={handleSubmit} className="mt-4">Generate Assessment</Button>

        </CardContent>

      </Card>

    </div>

  );

}