"use client"

import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
} from "@/components/ui/sheet"
import { cn } from "@/lib/utils"
import useReactResponsive from "@/hook/useReactResponsive"
import * as React from "react"

interface FilterSurfaceProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  title: string
  description?: string
  className?: string
  children: React.ReactNode
}

function FilterSurface({
  open,
  onOpenChange,
  title,
  description,
  className,
  children,
}: FilterSurfaceProps) {
  const { md } = useReactResponsive()

  if (!open) return null

  if (md) {
    return (
      <div
        className={cn(
          "space-y-5 rounded-2xl border border-border bg-card p-5 shadow-xs",
          className
        )}
      >
        <div className="space-y-1">
          <h2 className="text-base font-semibold text-foreground">{title}</h2>
          {description ? (
            <p className="text-sm text-muted-foreground">{description}</p>
          ) : null}
        </div>
        {children}
      </div>
    )
  }

  return (
    <Sheet open={open} onOpenChange={onOpenChange}>
      <SheetContent
        side="bottom"
        className={cn(
          "max-h-[85vh] rounded-t-3xl border-border px-4 pb-4 pt-6",
          className
        )}
      >
        <SheetHeader className="mb-4 text-start">
          <SheetTitle>{title}</SheetTitle>
          {description ? <SheetDescription>{description}</SheetDescription> : null}
        </SheetHeader>
        <div className="space-y-5 overflow-y-auto pb-2">{children}</div>
      </SheetContent>
    </Sheet>
  )
}

export { FilterSurface }