Karusel

import { useState } from "react";
import HorizontalCard from "@/public/HorizontalCard";

import {
  Dialog,
  DialogBody,
  DialogContent,
  DialogHeader,
  DialogTrigger,
  DialogFooter,
  DialogClose,
} from "@govtechmy/myds-react/dialog";

interface Feature {
  id: number;
  title: string;
  desc: string;
  image: string;
  open: string;
  support?: string; // optional
}

import { useState } from "react";
import HorizontalCard from "./HorizontalCard";
import {
  Dialog,
  DialogBody,
  DialogContent,
  DialogHeader,
  DialogTrigger,
  DialogFooter,
  DialogClose,
} from "@govtechmy/myds-react/dialog";
 
// Tentukan struktur untuk item karusel anda.
interface Feature {
  id: number;
  title: string;
  desc: string;
  image: string; // Imej untuk kad karusel
  open: string;  // Imej yang lebih besar untuk modal
  support?: string;
}
 
export default function App() {
  // 📸 Arahan Pengguna:
  // 1. Gantikan objek placeholder di bawah dengan data anda sendiri.
  // 2. Tambah seberapa banyak item yang anda perlukan ke dalam tatasusunan `features`.
  // 3. Untuk 'image' dan 'open', berikan laluan kepada fail imej anda.
  //    'image' adalah untuk kad karusel kecil, dan 'open' adalah untuk pop-up yang lebih besar.
 
  const features: Feature[] = [
    {
      id: 1,
      image: "/public/gambar_kad.png",
      title: "Tajuk Gambar Pertama",
      open: "/public/gambar_modal.png",
      desc: "Penerangan Gambar Pertama.",
    },
    {
      id: 2,
      image: "/public/gambar_kad2.png",
      title: "Tajuk Gambar Kedua",
      open: "/public/gambar_modal_2.png",
      desc: "Penerangan Gambar Kedua.",
    },
    // Tambah lebih banyak item di sini mengikut struktur yang sama.
  ];
 
  // State untuk menguruskan kandungan ciri mana yang dipaparkan dalam modal.
  const [currentFeatureIndex, setCurrentFeatureIndex] = useState(0);
 
  return (
    <div className="mx-auto max-w-[1328px] border-x border-[#F4F4F5] sm:px-[18px] md:px-[24px]">
      <section className="flex justify-center px-[18px] py-12">
        <div className="w-full">
          <Dialog>
            <HorizontalCard>
              {features.map((feature, index) => (
                <DialogTrigger key={feature.id}>
                  <div
                    className="relative flex-shrink-0 px-2 cursor-pointer"
                    style={{ width: "334px", height: "354px" }}
                    onClick={() => setCurrentFeatureIndex(index)}
                  >
                    {/* Card Container: Fixed size with overflow hidden */}
                    <div className="h-full w-full rounded-2xl shadow-2xl overflow-hidden border">
                      {/* Cara Imej Dimuatnaik:
                      1. object-cover = kelas memastikan imej anda (tanpa mengira saiz asal) akan mengisi bekas sepenuhnya tanpa herotan.
                                        Bahagian berlebihan imej akan dipotong secara automatik.
                      2. object-contain = Kelas ini mengecilkan imej supaya ia muat sepenuhnya di dalam bekas, sambil mengekalkan nisbah aspeknya.
                                          Ia tidak akan memotong imej, tetapi mungkin meninggalkan ruang kosong (letterboxing) jika nisbah aspek imej tidak sepadan dengan bekas. 
                      */}
                      <img
                        src={feature.image}
                        alt={feature.title}
                        className="w-full h-full"  // Imej akan muat dalam kad (jika imej terlalu besar, imej akan dimampatkan)
                      />
                    </div>
                  </div>
                </DialogTrigger>
              ))}
            </HorizontalCard>
 
            {/* Modal Body: This is the pop-up that appears when a card is clicked */}
            <DialogBody className="w-full md:!max-w-[800px]">
              <DialogClose>
                <button
                  className="absolute right-4 top-4 rounded-lg border border-[#E4E4E7] p-1.5 text-gray-500 hover:text-gray-800"
                  aria-label="Close modal"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    className="h-6 w-6"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M6 18L18 6M6 6l12 12"
                    />
                  </svg>
                </button>
              </DialogClose>
              <DialogHeader className="pb-0" />
              <DialogContent>
                <div className="flex flex-col items-center gap-8 md:flex-row justify-center">
                  {/* Modal Image: Uses the 'open' image path from your data */}
                  <img
                    src={features[currentFeatureIndex].open}
                    alt={features[currentFeatureIndex].title}
                    width={222}
                    height={275}
                  />
                  <div>
                    <h2 className="mb-4 text-base font-semibold">
                      {features[currentFeatureIndex].title}
                    </h2>
                    <p className="max-w-sm">
                      {features[currentFeatureIndex].desc}
                    </p>
                  </div>
                </div>
              </DialogContent>
              <DialogFooter className="pt-0" />
            </DialogBody>
          </Dialog>
        </div>
      </section>
    </div>
  );
}