import { getLocale, getTranslations } from "next-intl/server";
import { DirectionalChevron } from "@/components/ui/directional-chevron";
import { SectionHeading } from "@/components/website/ui/section-heading";
import { SiteButton } from "@/components/website/ui/site-button";
import { getLocaleDirection, type Locale } from "@/lib/i18n-utils";
import type { WebsiteHomeCardItem, WebsiteHomePageData } from "@/lib/api/website/home-types";
import { OurWorksCarousel } from "@/components/website/home/our-works-carousel";

const WORK_KEYS = ["work1", "work2", "work3"] as const;

type OurWorksProps = {
  section?: WebsiteHomePageData["sections"]["works"];
  items?: WebsiteHomeCardItem[];
};

export default async function OurWorks({ section, items }: OurWorksProps) {
  const t = await getTranslations();
  const locale = (await getLocale()) as Locale;
  const direction = getLocaleDirection(locale);

  const fallbackItems: WebsiteHomeCardItem[] = WORK_KEYS.map((key) => ({
    id: key,
    title: t(`ourWorks.items.${key}.title`),
    description: t(`ourWorks.items.${key}.desc`),
    imageSrc: "/images/services/service-placeholder.jpg",
  }));

  const displayItems = items?.length ? items : fallbackItems;

  return (
    <section className="px-4 py-10 sm:px-8 lg:px-[120px] lg:py-16">
      <div className="mx-auto flex max-w-[1440px] flex-col gap-10 lg:gap-16">
        {/* Header: stacked on mobile, side-by-side on desktop */}
        <div className="flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between">
          <SectionHeading
            title={section?.title ?? t("ourWorks.title")}
            description={section?.description ?? t("ourWorks.description")}
            className="lg:max-w-[640px]"
          />
          <SiteButton href="/our-work" className="shrink-0 self-start">
            <DirectionalChevron direction={direction} className="h-4 w-4" />
            {section?.ctaText ?? t("ourWorks.cta")}
          </SiteButton>
        </div>

        {/* Carousel: 3 visible, advances one-by-one */}
        <OurWorksCarousel
          items={displayItems}
          browseWorkLabel={t("ourWorks.browseWork")}
        />

        {/* Bottom CTA */}
        <div className="flex justify-center">
          <SiteButton href="/our-work">
            <DirectionalChevron direction={direction} className="h-4 w-4" />
            {section?.ctaText ?? t("ourWorks.cta")}
          </SiteButton>
        </div>
      </div>
    </section>
  );
}