"use client";

import { Button } from "@/components/ui/button";
import clsx from "clsx";
import { CheckCircle } from "lucide-react";
import Image from "next/image";
import React from "react";

const ContactDetails = () => {
  return (
    <section className="relative">
      <div className="container space-y-5 py-5">
        <div className="space-y-3">
          {[...Array(3)].map((i) => (
            <div
              key={i}
              className="flex items-center border p-4 rounded-md justify-between"
            >
              <div className="flex items-start space-x-2">
                <Image
                  height={500}
                  width={500}
                  src={"/assets/images/interior.webp"}
                  alt={"Image"}
                  className="w-10 object-cover"
                />
                <div>
                  <h5 className="font-semibold">{"Presidential fall"}</h5>
                  <span className="text-neutral-800 text-sm truncate">
                    {"Economy in 2024"}
                  </span>
                </div>
              </div>
            </div>
          ))}
        </div>
        <div className="flex items-center border p-4 rounded-md justify-between">
          <div className="flex items-center justify-between w-full space-x-2">
            <div>
              <h5 className="font-semibold">{"Q1 Performance Assessment"}</h5>
              <span className="text-neutral-800 text-sm truncate">
                {"Economy in 2024"}
              </span>
            </div>
            <Button className="rounded-full" variant={"outline"}>
              Take Poll
            </Button>
          </div>
        </div>
        <div className="space-y-2">
          <div className="flex items-center justify-between">
            <div className="flex gap-2 items-center">
              <h5 className="font-semibold">Manifesto</h5>
              <span className="text-primary">10</span>
            </div>
            <Button className="" variant={"link"}>
              View All
            </Button>
          </div>
          <div className="space-y-3">
            {[...Array(3)].map((i) => (
              <div key={i} className="border p-4 space-y-2 rounded-md">
                <div className="flex items-start h-24 justify-between w-full space-x-6">
                  <h6 className="font-semibold md:w-2/3 text-sm truncate-text-3">
                    Build a Nigeria, especially for our youth, where sufficient
                    jobs with decent wages create a better life. Build a
                    Nigeria, especially for our youth, where sufficient jobs
                    with decent wages create a better life. Build a Nigeria,
                    especially for our youth, where sufficient jobs with decent
                    wages create a better life. Build a Nigeria, especially for
                    our youth, where sufficient jobs with decent wages create a
                    better life.
                  </h6>
                  <div className="flex flex-col items-center w-fit h-full justify-between">
                    <span className="text-green-600 border text-center text-sm font-medium border-green-100 bg-green-50 p-1 w-12 rounded">
                      100%
                    </span>
                    <div className="flex-grow"></div>{" "}
                    <Button className="rounded-full" variant={"link"}>
                      Take Poll
                    </Button>
                  </div>
                </div>
                <div className="grid grid-cols-4 gap-2">
                  {[...Array(4)].map((j, index) => (
                    <div
                      key={j}
                      className={clsx(
                        "h-1 w-full",
                        index === 0 ? "bg-primary-500" : " bg-neutral-100"
                      )}
                    ></div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
        <div className="space-y-2">
          <div className="flex items-center justify-between">
            <div className="flex gap-2 items-center">
              <h5 className="font-semibold">Completed Projects</h5>
              <span className="text-primary">30</span>
            </div>
            <Button className="" variant={"link"}>
              View All
            </Button>
          </div>
          <div className="space-y-3">
            {[...Array(3)].map((i) => (
              <div key={i} className="border p-4 space-y-2 rounded-md">
                <div className="flex items-center justify-between w-full space-x-6">
                  <div>
                    <h6 className="font-semibold text-sm truncate-text-3">
                      Nkpogu Road Works
                    </h6>
                    <span className="text-neutral-800 text-sm truncate">
                      {"Economy in 2024"}
                    </span>
                  </div>
                  <div className="flex flex-col items-center w-fit h-full justify-between">
                    <span className="text-green-600">
                      <CheckCircle size={20} />
                    </span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export default ContactDetails;