"use client"

import { Button } from "@/components/ui/button"
import { Truck } from "lucide-react"
import Link from "next/link"

interface DeliveryTipsFloatProps {
  onClick?: () => void
}

export function DeliveryTipsFloat({ onClick }: DeliveryTipsFloatProps) {
  const buttonContent = (
    <Button
      variant="outline"
      size="sm"
      className="bg-white/90 backdrop-blur shadow-sm border-indigo-200 text-indigo-700 hover:bg-indigo-50 rounded-full text-xs h-8 px-3"
    >
      <Truck className="w-3.5 h-3.5 mr-1.5" />
      Delivery Tips
    </Button>
  )

  if (onClick) {
    return (
      <div className="fixed bottom-32 right-4 z-[54] animate-in fade-in zoom-in duration-500 delay-[1200ms]">
        <div onClick={onClick} className="cursor-pointer">
          {buttonContent}
        </div>
      </div>
    )
  }

  return (
    <div className="fixed bottom-32 right-4 z-[54] animate-in fade-in zoom-in duration-500 delay-[1200ms]">
      <Link href="/delivery-men">
        {buttonContent}
      </Link>
    </div>
  )
}