"use client";
import React from "react";
import { motion } from "motion/react";
import { toPersian } from "../lib/utils";

interface HeaderButtonProps {
  onClick?: () => void;
  children: React.ReactNode;
  variant?: "primary" | "secondary" | "outline" | "ghost";
  className?: string;
  badge?: number;
  icon?: React.ReactNode;
}

export default function HeaderButton({ 
  onClick, 
  children, 
  variant = "primary", 
  className = "", 
  badge,
  icon
}: HeaderButtonProps) {
  const baseStyles = "relative flex flex-col items-center justify-center rounded-xl transition-all duration-300 font-vazir select-none cursor-pointer overflow-visible focus-visible:ring-4 focus-visible:ring-canino-blue/30 focus-visible:outline-none";
  
  const variants = {
    primary: "bg-canino-blue text-white hover:bg-medical-gray-900 shadow-lg shadow-canino-blue/20",
    secondary: "bg-medical-gray-50 text-medical-gray-600 hover:bg-medical-gray-100",
    outline: "border-2 border-medical-gray-100 text-medical-gray-700 hover:border-canino-blue hover:text-canino-blue",
    ghost: "text-medical-gray-600 hover:bg-medical-gray-50 hover:text-canino-blue"
  };

  return (
    <motion.button
      whileHover={{ y: -2 }}
      whileTap={{ scale: 0.95 }}
      onClick={onClick}
      className={`${baseStyles} ${variants[variant]} ${className}`}
    >
      {icon && <div className="mb-0.5">{icon}</div>}
      <div className="whitespace-nowrap">{children}</div>
      
      {badge !== undefined && badge > 0 && (
        <motion.div
            initial={{ scale: 0 }}
            animate={{ scale: 1 }}
            className="absolute -top-1 -left-1 w-5 h-5 bg-red-500 text-white rounded-full border-2 border-white text-[8px] font-black flex items-center justify-center font-vazir"
        >
            {toPersian(badge.toString())}
        </motion.div>
      )}
    </motion.button>
  );
}