'use client';

import { Button } from '@/components/ui/Button';
import { Heading, Text } from '@/components/ui/Typography';
import { useTranslation } from '@/lib/hooks/useTranslation';
import Price from 'components/price';
import { Cart } from 'lib/shopify/types';
import { useState } from 'react';
import { redirectToCheckout } from './actions';

interface CartSummaryProps {
  cart: Cart;
}

export function CartSummary({ cart }: CartSummaryProps) {
  const { t } = useTranslation();
  const [isLoading, setIsLoading] = useState(false);

  const handleCheckout = async () => {
    setIsLoading(true);
    await redirectToCheckout();
    setIsLoading(false);
  };

  return (
    <div className="border rounded-md p-6 bg-white sticky top-20">
      <Heading level={4} className="mb-6">{t('cart.orderSummary')}</Heading>
      
      <div className="space-y-4 mb-6">
        <div className="flex justify-between">
          <Text weight="semibold">{t('cart.subtotal')}</Text>
          <Price
            amount={cart.cost.subtotalAmount.amount}
            currencyCode={cart.cost.subtotalAmount.currencyCode}
          />
        </div>
        
        <div className="flex justify-between">
          <Text weight="semibold">{t('cart.shipping')}</Text>
          <Text size="sm" color="muted" className="text-right">{t('cart.calculated')}</Text>
        </div>
        
        <div className="flex justify-between">
          <Text weight="semibold">{t('cart.total')}</Text>
          <Price
            amount={cart.cost.totalAmount.amount}
            currencyCode={cart.cost.totalAmount.currencyCode}
            className="text-xl font-bold"
          />
        </div>
      </div>
      
      <Button
        onClick={handleCheckout}
        disabled={isLoading}
        variant="primary"
        fullWidth
        size="lg"
      >
        {isLoading ? "Loading..." : t('cart.continueToCheckout')}
      </Button>
    </div>
  );
}