import { render } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import { ReviewCard } from '../review-card';
import type { Review } from '@alqove/api-client';

const baseReview: Review = {
  id: 'rev-1',
  order_item_id: 'oi-1',
  order_id: 'ord-1',
  store_id: 's-1',
  reviewer_user_id: 'u-1',
  rating: 5,
  rating_item_as_described: 5,
  rating_shipping_speed: 5,
  rating_communication: 5,
  rating_packaging: 5,
  title: 'Loved it',
  body: 'A wonderful purchase that I would happily recommend.',
  state: 'visible',
  edited_at: null,
  hidden_by_admin_id: null,
  hidden_at: null,
  hide_reason: null,
  is_editable: true,
  photos: [],
  created_at: '2026-05-01T10:00:00Z',
  updated_at: '2026-05-01T10:00:00Z',
};

describe('ReviewCard photo parity', () => {
  it('renders each photo with thumb_url when present, falls back to url, with empty alt', () => {
    const review: Review = {
      ...baseReview,
      photos: [
        { url: 'https://cdn.alqove.test/full-1.jpg', thumb_url: 'https://cdn.alqove.test/thumb-1.jpg' },
        // thumb_url missing — fall back to url.
        { url: 'https://cdn.alqove.test/full-2.jpg', thumb_url: null as unknown as string },
      ],
    };
    const { container } = render(<ReviewCard review={review} buyerName="You" />);

    // Photo <img> tags are the only HTML <img> elements in the card — the
    // dimension stars use SVGs from the StarPicker, not real <img>.
    const imgs = Array.from(container.querySelectorAll('img'));
    expect(imgs).toHaveLength(2);

    // First photo uses thumb_url.
    expect(imgs[0]).toHaveAttribute('src', 'https://cdn.alqove.test/thumb-1.jpg');
    expect(imgs[0]).toHaveAttribute('alt', '');

    // Second photo falls back to full url when thumb_url is missing.
    expect(imgs[1]).toHaveAttribute('src', 'https://cdn.alqove.test/full-2.jpg');
    expect(imgs[1]).toHaveAttribute('alt', '');
  });
});