import { ChevronDown } from "lucide-react";
import { MarkdownPreview } from "@/features/content/markdown-preview";
import type { TenantFaq } from "./contract";

export function TenantFaqsView({ items }: { items: TenantFaq[] }) {
  return (
    <section className="rounded-xl border bg-card shadow-sm">
      <div className="border-b p-5 sm:p-6">
        <h2 className="text-lg font-semibold">Guidance for Tenants</h2>
        <p className="mt-1 text-sm text-muted-foreground">Helpful information and answers from Tiar for tenants.</p>
      </div>

      {items.length === 0 ? (
        <div className="px-5 py-12 text-center sm:px-6">
          <h3 className="font-medium">No FAQs available</h3>
          <p className="mt-1 text-sm text-muted-foreground">There are no tenant FAQs yet.</p>
        </div>
      ) : (
        <div className="divide-y px-5 sm:px-6">
          {items.map((item) => (
            <details key={item.id} className="group">
              <summary className="flex min-h-14 cursor-pointer list-none items-center justify-between gap-4 py-4 font-medium marker:hidden">
                <span>{item.question}</span>
                <ChevronDown aria-hidden="true" className="size-4 shrink-0 text-muted-foreground transition-transform group-open:rotate-180" />
              </summary>
              <div className="max-w-3xl pb-5 pr-8">
                <MarkdownPreview value={item.answer} />
              </div>
            </details>
          ))}
        </div>
      )}
    </section>
  );
}