Product Card

"use client";
import React from "react";
import { ProductCard } from  "@/components/ui/product-card";

// RTL discount tag swap example
const originalDiscountTag = "הנחה 40%";
const discountTagParts = originalDiscountTag.split(' ');
const swappedDiscountTag = discountTagParts.reverse().join(' ');

const ProductCardDemo = () => (
  <section>
    <div className="min-h-[300px] flex flex-wrap gap-8 items-center justify-center relative">
      <ProductCard
        id="0"
        imageSrc="https://images.pexels.com/photos/18525574/pexels-photo-18525574/free-photo-of-unboxing-iphone-15-pro-max-box-in-natural-titanium-color-mention-zana_qaradaghy-on-instagram-while-use-this-photo-follow-on-instagram-zana_qaradaghy.jpeg"
        altText="iPhone 15 Pro"
        oldPrice="$1,199"
        price="$1,079"
        condition="Brand new"
        discountTag="10% OFF"
        title="iPhone 15 Pro"
        description="Titanium smartphone with an advanced camera system, offering stunning photography capabilities and a sleek design."
        onFilledButtonClick={(id) => console.log(`Filled button clicked for ID: ${id}`)}
        onOutlinedButtonClick={(id) => console.log(`Outlined button clicked for ID: ${id}`)}
      />
      {/* LIGHT THEME CARD */}
      <ProductCard
        id="1"
        imageSrc="https://images.unsplash.com/photo-1514473776127-61e2dc1dded3?q=80&w=2671&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
        altText="iPhone 7"
        oldPrice="$199"
        price="$159"
        condition="Refurbished"
        discountTag="20% OFF"
        title="iPhone 7"
        description="Classic iPhone model with 12MP camera and water resistance, offering reliable performance and essential features for everyday smartphone users."
        onFilledButtonClick={(id) => console.log(`Filled button clicked for ID: ${id}`)}
        onOutlinedButtonClick={(id) => console.log(`Outlined button clicked for ID: ${id}`)}
        showOutlinedButton={false}
        accentColor="#FF3900"
        textColor="#181818"
        outlineColor="#d7d7df"
        backgroundColor="#fff"
        patternColor="#eee"
        buttonBackground="#181818"
        buttonForeground="#f8f8fa"
        outerWidth={392}
        outerHeight={414}
        borderWidth={4}
        containerRounding={14}
        innerContainerRounding={14}
        buttonRounding={14}
        activeComponentScale={1.048}
        conditionTagTextColor="#FF3900"
      />
      <ProductCard
        id="2"
        imageSrc="https://images.unsplash.com/photo-1721864428881-dbabb9ea0017?q=80&w=2574&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
        altText="Samsung Galaxy Flip 6"
        oldPrice="$999"
        price="$499"
        condition="Pre-owned"
        discountTag="50% OFF"
        title="Samsung Galaxy Flip 6"
        description="Innovative foldable smartphone with a sleek design that enhances portability while providing a large display for immersive viewing experiences and multitasking."
        onFilledButtonClick={(id) => console.log(`Filled button clicked for ID: ${id}`)}
        onOutlinedButtonClick={(id) => console.log(`Outlined button clicked for ID: ${id}`)}
        accentColor="#00A6FB"
        buttonRounding={50}
        tagTextColor="#141414"
      />
      <ProductCard
        id="3"
        imageSrc="https://images.unsplash.com/photo-1511296933631-18b1a062212c?q=80&w=2436&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
        altText="iPhone X"
        oldPrice="₪999"
        price="₪599"
        condition="משומש"
        discountTag={swappedDiscountTag}
        title="iPhone X"
        description="סמארטפון אייקוני עם תצוגת Super Retina בגודל 5.8 אינץ', טכנולוגיית Face ID מתקדמת, מצלמות כפולות של 12MP ועיצוב חדשני שמהפכני בצילום הסלולרי."
        onFilledButtonClick={(id) => console.log(`Filled button clicked for ID: ${id}`)}
        onOutlinedButtonClick={(id) => console.log(`Outlined button clicked for ID: ${id}`)}
        showOutlinedButton={true}
        outlineColor="#f1f1f7"
        accentColor="#00A6FB"
        containerRounding={36}
        innerContainerRounding={21}
        buttonRounding={50}
        lightenButtonColor={0.47}
        filledButtonInscription="קנה עכשיו"
        outlinedButtonInscription="הוסף לעגלה"
        swapButtons={true}
        activeComponentScale={1.08}
        mirrorTags={true}
      />
    </div>
  </section>
);

export { ProductCardDemo };