"use client";

import { ReactNode } from "react";

interface MobileActionBarProps {
  children: ReactNode;
  className?: string;
}

export default function MobileActionBar({
  children,
  className = "",
}: MobileActionBarProps) {
  return (
    <div
      className={`fixed bottom-0 left-0 right-0 z-50 bg-white border-t border-gray-200 shadow-[0_-4px_20px_rgba(0,0,0,0.1)] p-3 sm:hidden safe-area-bottom ${className}`}
    >
      {children}
    </div>
  );
}

interface MobileActionBarPriceProps {
  label: string;
  price: string | number;
  currency?: string;
  className?: string;
}

export function MobileActionBarPrice({
  label,
  price,
  currency,
  className = "",
}: MobileActionBarPriceProps) {
  return (
    <div className={`bg-gray-100 rounded-xl px-3 py-2 shrink-0 ${className}`}>
      <p className="text-[10px] text-gray-500 leading-tight">{label}</p>
      <p className="text-base sm:text-lg font-bold text-[#1B7A50] leading-tight flex items-center gap-1">
        {typeof price === "number" ? price.toLocaleString() : price}
        {currency && <span className="text-xs text-gray-500">{currency}</span>}
      </p>
    </div>
  );
}

interface MobileActionBarButtonProps {
  children: ReactNode;
  onClick: () => void;
  variant?: "primary" | "secondary" | "outline";
  disabled?: boolean;
  className?: string;
  fullWidth?: boolean;
}

export function MobileActionBarButton({
  children,
  onClick,
  variant = "primary",
  disabled = false,
  className = "",
  fullWidth = false,
}: MobileActionBarButtonProps) {
  const baseClasses =
    "px-4 py-2.5 rounded-xl font-bold text-sm transition-all disabled:opacity-50";

  const variantClasses = {
    primary: "bg-[#0F5132] text-white active:bg-[#0F5132]/80",
    secondary:
      "bg-gray-100 text-gray-700 border border-gray-200 active:bg-gray-200",
    outline:
      "bg-white text-[#0F5132] border border-[#0F5132] active:bg-[#0F5132]/5",
  };

  return (
    <button
      onClick={onClick}
      disabled={disabled}
      className={`${baseClasses} ${variantClasses[variant]} ${fullWidth ? "flex-1" : "shrink-0"} ${className}`}
    >
      {children}
    </button>
  );
}