---
import type { HTMLAttributes } from "astro/types";
import { tv } from "tailwind-variants";

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/starwind/accordion";
import { Image } from "@/components/starwind/image"
import type { ImageMetadata } from "astro";
import FaqImage from "@/assets/faq.jpg"

export interface FaqItem {
  title: string;
  content: string;
}

interface Props extends HTMLAttributes<"section"> {
  heading: string;
  description: string;
  items: FaqItem[];
  image?: ImageMetadata;
}

const faq4Styles = tv({
  base: "@container mx-auto w-full max-w-5xl px-4 pt-24",
});

const {
  heading,
  description,
  items = [],
  image = FaqImage,
  class: className,
  ...rest
} = Astro.props;
---

<section class={faq4Styles({ class: className })} {...rest}>
  <div class="grid gap-8 @2xl:grid-cols-2 @2xl:items-start">
    <div class="flex flex-col @2xl:items-start">
      <h2 class="font-heading text-center text-4xl font-semibold @2xl:text-left">{heading}</h2>
      <p class="text-muted-foreground mt-2 text-center @2xl:text-left">
        {description}
      </p>
      <Accordion defaultValue="item-1" class="mt-6 space-y-2">
        {
          items.map((item, idx) => (
            <AccordionItem value={`item-${idx + 1}`} class="bg-card rounded-2xl border border-border last:border">
              <AccordionTrigger class="[&_svg]:bg-foreground [&_svg]:text-primary-foreground px-4 [&_svg]:size-7 [&_svg]:rounded-full [&_svg]:p-1">
                {item.title}
              </AccordionTrigger>
              <AccordionContent class="text-muted-foreground px-4">{item.content}</AccordionContent>
            </AccordionItem>
          ))
        }
      </Accordion>
    </div>
    <div class="bg-muted relative aspect-4/3 w-full overflow-hidden rounded-xl border border-muted">
      <Image src={image} alt="FAQ" loading="lazy" />
      <!-- <img src={image} alt="" class="h-full w-full object-cover" loading="lazy" /> -->
    </div>
  </div>
</section>
