"use client";

import Link from "next/link";

import type { Product } from "@/lib/data";
import { AddToCartButton } from "@/components/add-to-cart-button";
import { Button } from "@/components/ui/button";

export function MobileAddToCartBar({ product, imageOverride }: { product: Product; imageOverride?: string }) {
  return (
    <div className="fixed bottom-4 left-0 right-0 z-40 px-4 md:hidden">
      <div className="mx-auto flex max-w-lg items-center justify-between rounded-2xl border border-border bg-background/95 p-3 shadow-xl backdrop-blur-xl">
        <div>
          <p className="text-xs text-muted-foreground">Total</p>
          <p className="text-base font-semibold">৳{product.price}</p>
        </div>
        <div className="flex items-center gap-2">
          <AddToCartButton product={product} imageOverride={imageOverride} className="px-4" />
          <Link href={`/checkout?product=${encodeURIComponent(product.name)}&price=${product.price}`}>
            <Button className="bg-orange-600 px-4 text-white hover:bg-orange-700">Buy Now</Button>
          </Link>
        </div>
      </div>
    </div>
  );
}