// File: InterfaceFactory/app/ShopifyProductCard/page.tsx
'use client';

import React, { useEffect } from 'react';
import { ConfigProvider, App as AntdApp } from 'antd';
import enUS from 'antd/es/locale/en_US';
import ShopifyProductCard from '@/components/ShopifyProductCard/ShopifyProductCard';
import '@/app/css/ShopifyProductCard.scss';

import { mockProduct, ShopifyProduct } from './mockData';

// Minimal shape the card actually uses
type MinimalShopifyProductItem = {
  id?: string;
  title: string;
  images: { src: string }[];
  variants: { price: string }[];
  available?: boolean;
};

const toShopifyProductItem = (p: ShopifyProduct): MinimalShopifyProductItem => ({
  id: p.id,
  title: p.title,
  images: [{ src: p.image }],           // ✅ card expects images[0].src
  variants: [{ price: String(p.price) }],// ✅ card expects variants[0].price (string)
  available: p.available,
});

export default function ShopifyProductCardPage() {
  // If the card uses a portal, ensure it exists (safe no-op otherwise)
  useEffect(() => {
    if (!document.getElementById('root-portal')) {
      const el = document.createElement('div');
      el.id = 'root-portal';
      document.body.appendChild(el);
    }
  }, []);

  return (
    <ConfigProvider locale={enUS}>
      <AntdApp>
        <div style={{ padding: 24, background: '#f9f9f9', minHeight: '100vh' }}>
          {/* ✅ Provide the correct prop shape */}
          <ShopifyProductCard item={toShopifyProductItem(mockProduct) as any} type={0} showPrice />
        </div>
      </AntdApp>
    </ConfigProvider>
  );
}
