import { Suspense } from "react";
import type { Metadata } from "next";
import LaboratoriumMain from "./_components/LaboratoriumMain";
import { Skeleton } from "@/components/ui/skeleton";

export const metadata: Metadata = {
  title: "Laboratorium",
  description: "Layanan pemeriksaan laboratorium untuk mendukung diagnosis dan pemantauan kondisi kesehatan pasien. Dilakukan dengan peralatan modern dan tenaga ahli laboratorium profesional.",
  keywords: ["laboratorium", "pemeriksaan darah", "cek kesehatan", "medical test", "laboratorium Yogyakarta", "cek laboratorium", "pemeriksaan laboratorium klinik"],
  openGraph: {
    title: "Laboratorium | Klinik Adera",
    description: "Layanan pemeriksaan laboratorium untuk mendukung diagnosis dan pemantauan kondisi kesehatan pasien.",
    images: ["/assets/program/laboratorium.jpg"],
    type: "website",
  },
  twitter: {
    card: "summary_large_image",
    title: "Laboratorium | Klinik Adera",
    description: "Layanan pemeriksaan laboratorium untuk mendukung diagnosis dan pemantauan kondisi kesehatan pasien.",
    images: ["/assets/program/laboratorium.jpg"],
  },
  alternates: {
    canonical: "/layanan/laboratorium",
  },
};

const LaboratoriumSkeleton = () => (
  <div className="space-y-8">
    <div className="bg-[#EEF6FF] p-6">
      <div className="max-w-7xl mx-auto space-y-12">
        <div className="text-center space-y-6">
          <Skeleton className="w-80 h-16 mx-auto" />
          <Skeleton className="w-[500px] h-8 mx-auto" />
          <div className="flex gap-4 justify-center">
            <Skeleton className="w-48 h-14 rounded-full" />
            <Skeleton className="w-48 h-14 rounded-full" />
          </div>
        </div>
        <Skeleton className="w-full aspect-video rounded-xl" />
      </div>
    </div>

    <div className="bg-gradient-to-r from-[#5D8BFF] to-[#104CE4] py-10">
      <div className="max-w-7xl mx-auto space-y-6">
        <Skeleton className="w-80 h-10 bg-white/20" />
        <Skeleton className="w-96 h-6 bg-white/20" />
        <div className="flex gap-2 overflow-hidden">
          {[1, 2, 3, 4, 5, 6].map((i) => (
            <Skeleton key={i} className="min-w-70 h-80 bg-white/20 rounded-lg" />
          ))}
        </div>
      </div>
    </div>

    <div className="bg-white py-8">
      <div className="max-w-7xl mx-auto space-y-8">
        <Skeleton className="w-80 h-10" />
        <Skeleton className="w-[500px] h-6" />
        <Skeleton className="w-full h-64" />
      </div>
    </div>
  </div>
);

export default function Page() {
  return (
    <Suspense fallback={<LaboratoriumSkeleton />}>
      <LaboratoriumMain />
    </Suspense>
  );
}