"use client";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import { MoreVertical } from "lucide-react";

const FeedbackForm = () => {
  const [region, setRegion] = useState("nasional");
  const [feedbackList, setFeedbackList] = useState<string[]>([
    "Silahkan berikan rating Anda terkait dengan kemudahan akses website MediaHUB Polri",
    "Silahkan berikan rating Anda terkait dengan konten MediaHUB Polri",
    "Silahkan berikan rating Anda terkait dengan tampilan MediaHUB Polri",
  ]);
  const [newFeedback, setNewFeedback] = useState("");

  const handleAddFeedback = () => {
    if (newFeedback.trim()) {
      setFeedbackList([...feedbackList, newFeedback.trim()]);
      setNewFeedback("");
    }
  };

  return (
    <div className="space-y-4">
      <div className="bg-white rounded-md p-6 flex flex-col md:flex-row gap-6">
        <div className="md:w-1/2 space-y-4">
          <div>
            <p className="font-medium mb-2">Wilayah Publish</p>
            <RadioGroup
              defaultValue="nasional"
              onValueChange={(value) => setRegion(value)}
              className="flex items-center gap-6"
            >
              <div className="flex items-center space-x-2">
                <RadioGroupItem value="nasional" id="nasional" />
                <label htmlFor="nasional">Nasional</label>
              </div>
              <div className="flex items-center space-x-2">
                <RadioGroupItem value="internasional" id="internasional" />
                <label htmlFor="internasional">Internasional</label>
              </div>
            </RadioGroup>
          </div>

          <div>
            <p className="font-medium mb-2">Poin Penilaian</p>
            <Textarea
              placeholder="Tulis poin yang ingin dijadikan penilaian"
              value={newFeedback}
              onChange={(e) => setNewFeedback(e.target.value)}
              className="min-h-[100px]"
            />
          </div>

          <Button
            onClick={handleAddFeedback}
            className="bg-blue-600 text-white"
          >
            Tambah Feedback
          </Button>
        </div>

        <div className="md:w-1/2">
          <h3 className="font-semibold mb-2 border-b pb-1">Feedback</h3>
          <p className="font-medium mb-4">Pertanyaan</p>
          <ul className="space-y-3">
            {feedbackList.map((item, index) => (
              <li key={index} className="flex justify-between items-start">
                <span>{item}</span>
                <MoreVertical className="w-4 h-4 text-gray-600 cursor-pointer" />
              </li>
            ))}
          </ul>
        </div>
      </div>
    </div>
  );
};

export default FeedbackForm;