import { Accordion, Box, Heading, Text } from "@chakra-ui/react";
import { Plus } from "lucide-react";
import type { ContentItem } from "../../db/schema";
import { Section } from "./Section";
import { SectionHeading } from "./SectionHeading";

export function Faq({ items }: { items: ContentItem[] }) {
  if (items.length === 0) return null;
  return (
    <Section id="faq">
      <SectionHeading
        eyebrow="常見問題"
        title="安裝前，你可能想知嘅事"
        description="仲有其他疑問？歡迎隨時 WhatsApp 問我哋。"
      />
      <Box maxW="860px">
        <Accordion.Root collapsible defaultValue={["faq-0"]}>
          {items.map((item, index) => (
            <Accordion.Item
              key={item.id}
              value={`faq-${index}`}
              borderTopWidth="1px"
              borderColor="border.subtle"
              _last={{ borderBottomWidth: "1px" }}
            >
              <Heading as="h3" m="0" w="full" fontWeight="normal">
                <Accordion.ItemTrigger py="6" px="0" w="full" _hover={{ bg: "transparent" }}>
                  <Text flex="1" textAlign="start" fontFamily="heading" fontWeight="700" color="ink" fontSize={{ base: "md", md: "lg" }}>
                    {item.title}
                  </Text>
                  <Accordion.ItemIndicator color="brand.700" _open={{ transform: "rotate(45deg)" }}>
                    <Plus size={18} />
                  </Accordion.ItemIndicator>
                </Accordion.ItemTrigger>
              </Heading>
              <Accordion.ItemContent>
                <Accordion.ItemBody px="0" pb="7" pt="0" color="fg.muted" fontSize="sm" lineHeight="1.9" maxW="2xl">
                  {item.description}
                </Accordion.ItemBody>
              </Accordion.ItemContent>
            </Accordion.Item>
          ))}
        </Accordion.Root>
      </Box>
    </Section>
  );
}