'use client';

import { Display } from '@/components/display';
import { useTranslations } from 'next-intl';

interface SubscribeDetailProps {
  subscribe?: Partial<
    API.Subscribe & {
      name: string;
      quantity: number;
    }
  >;
}

export function SubscribeDetail({ subscribe }: Readonly<SubscribeDetailProps>) {
  const t = useTranslations('subscribe.detail');

  return (
    <>
      <div className='mb-1 font-semibold text-[#225BA9]'>{t('productDetail')}</div>
      <ul className='grid grid-cols-1 gap-2 text-[15px] font-light text-[#666] *:flex *:items-center *:justify-between lg:grid-cols-1'>
        {subscribe?.name && (
          <li className='flex items-center justify-between'>
            <span className='line-clamp-2 flex-1'>{subscribe?.name}</span>
            <span>
              x <span>1</span>
            </span>
          </li>
        )}
        <li>
          <span className=''>{t('availableTraffic')}</span>
          <span>
            <Display type='traffic' value={subscribe?.traffic} unlimited />
          </span>
        </li>
        <li>
          <span className=''>{t('connectionSpeed')}</span>
          <span>
            <Display type='trafficSpeed' value={subscribe?.speed_limit} unlimited />
          </span>
        </li>
        <li>
          <span className=''>{t('connectedDevices')}</span>
          <span>
            <Display value={subscribe?.device_limit} type='number' unlimited />
          </span>
        </li>
      </ul>
    </>
  );
}
