import type React from 'react'
import { cn } from '../../utils'
import { SheetContent, SheetTitle } from '../Sheet/sheet'

const MobileMenuSheetContent: React.FC<
  React.ComponentPropsWithoutRef<typeof SheetContent>
> = ({ className, ...props }) => (
  <SheetContent
    side="bottom"
    className={cn(
      'max-h-[85%] w-full rounded-t-xl bg-background text-foreground [&>button]:hidden',
      className,
    )}
    {...props}
  >
    <SheetTitle className="sr-only">Menu</SheetTitle>
    {/* Drag Handle */}
    <div className="flex justify-center py-3">
      <div className="h-1 w-8 rounded-full bg-muted-foreground/20" />
    </div>
    {props.children}
  </SheetContent>
)
MobileMenuSheetContent.displayName = 'MobileMenuSheetContent'

export { MobileMenuSheetContent }