import { formatSubscriptionProduct, TruncatedText, useMobile } from '@blocklet/payment-react';
import type { TSubscriptionExpanded } from '@blocklet/payment-types';
import { InfoOutlined } from '@mui/icons-material';
import { Stack, Tooltip, Typography } from '@mui/material';

type Props = {
  subscription: TSubscriptionExpanded;
  variant?: 'subtitle1' | 'subtitle2' | 'body1' | 'body2' | 'h5' | 'h4' | 'h3' | 'h2' | 'h1';
  hideSubscription?: boolean;
  maxLength?: number;
};

export default function SubscriptionDescription({
  subscription,
  variant = 'body1',
  hideSubscription = false,
  maxLength = 80,
}: Props) {
  const { isMobile } = useMobile();
  if (subscription.description) {
    return (
      <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
        <Typography variant={variant} className="subscription-description">
          <TruncatedText text={subscription.description} maxLength={maxLength} useWidth />
        </Typography>
        {!hideSubscription && !isMobile && (
          <Tooltip title={formatSubscriptionProduct(subscription.items)}>
            <InfoOutlined sx={{ color: 'text.secondary' }} fontSize="small" />
          </Tooltip>
        )}
      </Stack>
    );
  }

  return (
    <Typography variant={variant}>
      <TruncatedText text={formatSubscriptionProduct(subscription.items)} maxLength={maxLength} useWidth />
    </Typography>
  );
}
