'use client';

import { Card, CardContent, CardHeader, CardTitle } from '@workspace/ui/components/card';
import { Separator } from '@workspace/ui/components/separator';
import { useTranslations } from 'next-intl';

export function SubscribeBilling({ order }: { order: API.Order }) {
  const t = useTranslations('subscribe.billing');
  const t_c = useTranslations('components.billing');
  return (
    <Card>
      <CardHeader>
        <CardTitle>{t('billingTitle')}</CardTitle>
      </CardHeader>
      <CardContent>
        <div className={'grid gap-4'}>
          <div className={'flex items-center justify-between'}>
            <span className={'text-muted-foreground'}>{t('productDiscount')}</span>
            <span className={''}>-¥ {order?.discount_amount}</span>
          </div>
          <div className={'flex items-center justify-between'}>
            <span className={'text-muted-foreground'}>{t('couponDiscount')}</span>
            <span className={''}>-¥ {order?.coupon_discount_amount}</span>
          </div>
          <div className={'flex items-center justify-between'}>
            <span className={'text-muted-foreground'}>{t_c('planDuration')}</span>
            <span className={''}>
              {order?.quantity === 1 ? t_c('30days') : ''}
              {order?.quantity === 12 ? t_c('365days') : ''}
            </span>
          </div>
          <div className={'flex items-center justify-between'}>
            <span className={'text-muted-foreground'}>{t('gift')}</span>
            <span className={''}>-¥ {order?.gift_balance_deduction_amount}</span>
          </div>
          <div className={'flex items-center justify-between'}>
            <span className={'text-muted-foreground'}>{t('fee')}</span>
            <span className={''}>¥ {order?.fee}</span>
          </div>
          <Separator />
          <div className={'flex items-center justify-between font-medium'}>
            <span className={'text-muted-foreground'}>{t('total')}</span>
            <span className={''}>¥ {order?.total_amount}</span>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}