'use client';

import { useState } from 'react';
import { Icon } from '@/components/ui/icons/Icon';
import { Image } from '@/components/ui/primitives/Image';
import { useLocale, useT } from '@/lib/i18n/react';
import { formatAgorotLocale } from '@/lib/money';

export interface DealSummaryRowProps {
  thumbnailUrl: string | null;
  title: string;
  businessName: string;
  skuLabel: string | null;
  discountedPriceAgorot: number;
  originalPriceAgorot: number;
}

export function DealSummaryRow({
  thumbnailUrl,
  title,
  businessName,
  skuLabel,
  discountedPriceAgorot,
  originalPriceAgorot,
}: DealSummaryRowProps) {
  const t = useT('checkout_modal');
  const { locale } = useLocale();
  const [imgError, setImgError] = useState(false);

  const hasDiscount = originalPriceAgorot > discountedPriceAgorot;

  return (
    <div className="flex items-start gap-3">
      {!thumbnailUrl || imgError ? (
        <div
          className="bg-surface-inset border-border-subtle flex size-18 shrink-0 items-center justify-center rounded-lg border"
          aria-hidden
        >
          <Icon name="Camera" size="md" className="text-text-muted" />
        </div>
      ) : (
        <Image
          src={thumbnailUrl}
          alt={title}
          variant="card"
          width={72}
          height={72}
          sizes="5rem"
          loading="eager"
          className="size-18 shrink-0 rounded-lg object-cover"
          onError={() => setImgError(true)}
        />
      )}
      <div className="flex min-w-0 flex-col gap-1">
        <p className="text-text-secondary truncate text-sm">{businessName}</p>
        <p className="line-clamp-2 leading-snug font-medium">{title}</p>
        {skuLabel && (
          <p className="text-text-secondary text-xs">
            {t('sku_label')}: {skuLabel}
          </p>
        )}
        <div className="mt-1 flex items-baseline gap-2">
          <span className="text-lg font-semibold">
            {formatAgorotLocale(discountedPriceAgorot, locale)}
          </span>
          {hasDiscount && (
            <span className="text-text-secondary text-sm line-through">
              {formatAgorotLocale(originalPriceAgorot, locale)}
            </span>
          )}
        </div>
      </div>
    </div>
  );
}