"use client"

import { Button } from "@/components/ui/button"
import { cn } from "@/lib/utils"
import useReactResponsive from "@/hook/useReactResponsive"

interface FilterActionsProps {
  onApply: () => void
  onClear: () => void
  applyLabel: string
  clearLabel: string
  applyDisabled?: boolean
  className?: string
}

function FilterActions({
  onApply,
  onClear,
  applyLabel,
  clearLabel,
  applyDisabled = false,
  className,
}: FilterActionsProps) {
  const { md } = useReactResponsive()

  return (
    <div
      className={cn(
        "flex flex-col-reverse gap-3 border-t border-border bg-background/95 pt-4 backdrop-blur-sm",
        md
          ? "flex-row items-center justify-end border-t-0 bg-transparent pt-0"
          : "sticky bottom-0 -mx-4 px-4 pb-1",
        className
      )}
    >
      <Button
        type="button"
        variant="outline"
        size="xl"
        className="h-11 rounded-xl px-4"
        onClick={onClear}
      >
        {clearLabel}
      </Button>
      <Button
        type="button"
        size="xl"
        className="h-11 rounded-xl px-4"
        onClick={onApply}
        disabled={applyDisabled}
      >
        {applyLabel}
      </Button>
    </div>
  )
}

export { FilterActions }