"use client";
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel";
import { ExternalLink, Search, Share } from "lucide-react";
import Image from "next/image";
import React from "react";
import DonationInfo from "./DonationInfo";
import StorySection from "./StorySection";
import DonationSummary from "./DonationSummary";
import { Button } from "@/components/ui/button";

const CampaignDetails = () => {
  return (
    <section className="relative">
      <Carousel className="w-full group/carousel">
        <CarouselContent>
          {[...Array(5)].map((_, index) => (
            <CarouselItem key={index}>
              <div className="">
                <Image
                  className="aspect-video mx-auto object-cover"
                  width={500}
                  height={500}
                  alt=""
                  src={`/assets/images/interior2.webp`}
                />
              </div>
            </CarouselItem>
          ))}
        </CarouselContent>
        <CarouselPrevious className="translate-x-12" />
        <CarouselNext className="-translate-x-12" />
      </Carousel>
      <div className="container space-y-5 py-5">
        <div className="flex items-center gap-8 justify-between">
          <div className="space-y-2">
            <h4 className="">{"Nkpogu Link Road Construction: 300KM Road"}</h4>
          </div>
          <Button variant="ghost" size="icon" className="rounded-full">
            <ExternalLink className="icon !m-0" />
          </Button>
        </div>
        <div className="flex items-start justify-between gap-8">
          <div className="space-y-4 w-[70%]">
            <DonationInfo
              title="Nkpogu Link Road Construction: 300KM Road"
              currentAmount={500000000}
              targetAmount={5000000000}
            />
          </div>
          <div className="w-[30%]">
            <DonationSummary />
          </div>
        </div>
        <div className="flex items-start justify-between gap-8">
          <div className="space-y-4 w-[70%]">
            <StorySection />
          </div>
          <div className="w-[30%]">
            <div className="flex bg-black items-center space-x-2 p-2 rounded h-12">
              <Image
                height={500}
                width={500}
                src="/assets/images/interior.webp"
                alt="Avatar 1"
                className="w-8 h-8 rounded-full border border-white"
              />

              <div className="text-white">
                <p className="text-xs text-neutral-200">Hailey Bruce</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="sticky bottom-0 border-t py-3 bg-white inset-x-0 container">
        <p className="text-neutral-700 text-sm">Created: 12 September, 2024</p>
      </div>
    </section>
  );
};

export default CampaignDetails;