"use client";

import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Separator } from "@/components/ui/separator";
import { Slider } from "@/components/ui/slider";
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import { CircleHelp } from "lucide-react";
import React, { useState } from "react";

const dummyPreferences = [
  {
    id: 1,
    name: "readability",
    description: "assesses the clarity and understandability of the code",
  },
  {
    id: 2,
    name: "refinement",
    description: "assesses the process and stages of code development",
  },
  {
    id: 3,
    name: "modularity",
    description:
      "assesses how well the code is compartmentalized into separate parts",
  },
  {
    id: 4,
    name: "optimization",
    description: "assesses the code’s efficiency and resource management",
  },
  {
    id: 5,
    name: "portability",
    description:
      "assesses the ability of the code to run in different environments",
  },
  {
    id: 6,
    name: "robustness",
    description:
      "assesses how the code handles unexpected situations or inputs",
  },
  {
    id: 7,
    name: "maintainability",
    description: "assesses how easy it is to maintain and extend the code",
  },
  {
    id: 8,
    name: "conformity",
    description: "assesses adherence to predefined standards or best practices",
  },
  {
    id: 9,
    name: "security",
    description:
      "assesses how the code protects data and resists malicious attacks",
  },
  {
    id: 10,
    name: "functionality",
    description:
      "assesses how well the code achieves its intended functionality",
  },
];

const Page = () => {
  const [value, setValue] = useState([50]);

  return (
    <div className="flex-1 space-y-4  p-4 md:p-8 pt-6">
      <Card className="max-w-[600px]">
        <CardHeader>
          <CardTitle className="mb-4 font-bold text-xl">
            Code Evaluation Criteria
          </CardTitle>
          <Separator />
        </CardHeader>

        <CardContent>
          <div className="grid grid-cols-2 gap-y-8 gap-x-16">
            {dummyPreferences.map((item) => (
              <div key={item.id} className="space-y-6">
                <div className="flex items-center gap-2">
                  <h4 className="capitalize font-semibold">{item.name}</h4>
                  <Tooltip>
                    <TooltipTrigger>
                      <CircleHelp className="size-4" />
                    </TooltipTrigger>
                    <TooltipContent>
                      <p>{item.description}</p>
                    </TooltipContent>
                  </Tooltip>
                </div>
                <Slider
                  defaultValue={[50]}
                  value={value}
                  onValueChange={(v) => {
                    console.log(v);
                    setValue(v);
                  }}
                  min={0}
                  max={100}
                  step={1}
                />
              </div>
            ))}
          </div>
        </CardContent>
        <CardFooter>
          <Button>Submit</Button>
        </CardFooter>
      </Card>
    </div>
  );
};

export default Page;