'use client';

import { Text } from "@/components/ui/Typography";
import { useAppSelector } from "@/lib/redux/hooks";
import { selectBoxTotal } from "@/lib/redux/slices/boxSlice";
import Link from "next/link";

export function BuildBoxMobileSummary() {
  const boxTotal = useAppSelector(selectBoxTotal);

  return (
    <div className="lg:hidden fixed bottom-0 left-0 right-0 h-20 bg-white border-t border-gray-200 flex items-center justify-between px-4 z-50">
      <div>
        <Text weight="semibold">Cijena boxa: ${boxTotal.toFixed(2)}</Text>
      </div>
      <Link 
        href="/build-box/customize" 
        className={`px-6 py-2 rounded ${boxTotal > 0 ? 'bg-black text-white' : 'bg-gray-300 text-gray-500 pointer-events-none'}`}
      >
        Idući korak
      </Link>
    </div>
  );
}