import type { CartItem } from '@/types';
import { Button } from '@/components/ui/button';
import { Separator } from '@/components/ui/separator';
import { ScrollArea } from '@/components/ui/scroll-area';
import { Badge } from '@/components/ui/badge';
import { CreditCard, Tag } from 'lucide-react';

interface CartSummaryProps {
  cartItems: CartItem[];
  onCheckout: () => void;
}

export function CartSummary({ cartItems, onCheckout }: CartSummaryProps) {
  const subtotal = cartItems.reduce((sum, item) => sum + item.price * item.quantity, 0);
  
  // Simple discount logic: 10% off if subtotal > $50
  let discount = 0;
  let discountDescription = "";
  if (subtotal > 50) {
    discount = subtotal * 0.10;
    discountDescription = "10% High Value Discount";
  } else if (cartItems.some(item => item.name.toLowerCase().includes("coffee") && item.quantity >=2)) {
    // Example: Buy 2 coffees, get $1 off
    discount = 1.00;
    discountDescription = "$1 Off Coffee Special";
  }

  const taxRate = 0.08; // 8% tax
  const taxes = (subtotal - discount) * taxRate;
  const total = subtotal - discount + taxes;

  return (
    <div className="space-y-4">
      <div className="space-y-1.5 text-sm">
        <div className="flex justify-between">
          <span>Subtotal</span>
          <span>${subtotal.toFixed(2)}</span>
        </div>
        {discount > 0 && (
          <div className="flex justify-between text-green-600">
            <div className="flex items-center">
              <Tag className="h-4 w-4 mr-1" />
              <span>Discount ({discountDescription})</span>
            </div>
            <span>-${discount.toFixed(2)}</span>
          </div>
        )}
        <div className="flex justify-between">
          <span>Taxes ({(taxRate * 100).toFixed(0)}%)</span>
          <span>${taxes.toFixed(2)}</span>
        </div>
      </div>
      <Separator />
      <div className="flex justify-between text-lg font-bold">
        <span>Total</span>
        <span>${total.toFixed(2)}</span>
      </div>
      <Button onClick={onCheckout} className="w-full text-lg py-6" size="lg" disabled={cartItems.length === 0}>
        <CreditCard className="mr-2 h-5 w-5" /> Checkout
      </Button>
    </div>
  );
}