"use client";

import type { ReactNode } from "react";
import { ChevronRight, GraduationCap, X } from "lucide-react";
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer";

/**
 * Üniversite sayfasında özet kartlarının altındaki "Akademik göstergeler ›"
 * satırı (Apple Sağlık'taki "Tüm verileri göster" gibi): sık bakılan sayılar
 * kartlarda, ayrıntı bir dokunuş derinde. İkinci satır içeride ne olduğunu
 * önceden söyler. Ayrıntı alttan açılan çekmecede; çekmece ve kapatma
 * çarpısı cta-sira-form.tsx'teki çekmeceyle birebir aynı sınıf setinde.
 * Kartlar sunucuda üretilip `children` olarak gelir.
 */
export function AkademikAyrinti({
  universite,
  onizleme,
  children,
}: {
  universite: string;
  onizleme: string;
  children: ReactNode;
}) {
  return (
    <Drawer handleOnly>
      <DrawerTrigger asChild>
        <button
          type="button"
          className="mt-4 flex w-full cursor-pointer items-center gap-4 group rounded-2xl border border-slate-200 bg-white p-4 text-left transition-[background-color,border-color,transform] duration-150 hover:border-orange-500 hover:bg-orange-50/60 active:scale-[0.99] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring sm:p-5"
        >
          <span className="flex size-11 shrink-0 items-center justify-center rounded-xl bg-primary/10">
            <GraduationCap className="size-5 text-primary" aria-hidden />
          </span>
          <span className="min-w-0 flex-1">
            <span className="block font-heading text-lg font-bold text-slate-900">
              Akademik göstergeler
            </span>
            <span className="block truncate text-sm text-slate-500">
              {onizleme}
            </span>
          </span>
          <ChevronRight
            className="size-5 shrink-0 text-slate-400 transition-[color,transform] duration-150 group-hover:translate-x-0.5 group-hover:text-orange-500"
            aria-hidden
          />
        </button>
      </DrawerTrigger>
      <DrawerContent className="max-h-[92dvh] bg-white sm:mx-auto sm:max-w-2xl sm:border-x sm:border-slate-200 sm:shadow-2xl">
        <DrawerClose className="absolute top-3 right-3 z-10 flex size-9 cursor-pointer items-center justify-center rounded-full border border-slate-200 bg-popover text-slate-500 transition-[background-color,transform] duration-150 hover:bg-slate-100 hover:text-slate-800 active:scale-[0.96]">
          <X className="size-4" aria-hidden />
          <span className="sr-only">Kapat</span>
        </DrawerClose>
        <div className="min-h-0 flex-1 overflow-y-auto px-4 pt-5 pb-[max(1.25rem,env(safe-area-inset-bottom))] sm:px-6">
          <DrawerTitle className="px-10 text-center font-heading text-2xl font-bold text-slate-900">
            Akademik göstergeler
          </DrawerTitle>
          <DrawerDescription className="mt-1 px-10 text-center text-sm text-slate-500">
            {universite}
          </DrawerDescription>
          <div className="mt-5">{children}</div>
        </div>
      </DrawerContent>
    </Drawer>
  );
}