"use client"
import { Heading, Label } from '@/components/ui/Typography';
import { AddToCart } from 'components/cart/add-to-cart';
import Price from 'components/price';
import Prose from 'components/prose';
import { Product } from 'lib/shopify/types';
import { useState } from 'react';
import { ProductQuantity } from './ProductQuantity';
import { VariantSelector } from './VariantSelector';

export function ProductDescription({ product }: { product: Product }) {
  const [quantity, setQuantity] = useState(1);

  return (
    <div className="pt-5 overflow-hidden">
      <div className="mb-6 flex flex-col pb-4 border-b">
        <Heading level={1} className="mb-3">{product.title}</Heading>
        <div className="mr-auto w-auto">
          <Price
            amount={product.priceRange.maxVariantPrice.amount}
            currencyCode={product.priceRange.maxVariantPrice.currencyCode}
            className="text-xl"
          />
        </div>
      </div>
      
      {product.descriptionHtml ? (
        <Prose
          className="mb-6 text-gray-600"
          html={product.descriptionHtml}
        />
      ) : null}
      
      <VariantSelector options={product.options} variants={product.variants} />
      
      <div className="mt-8 mb-6">
        <Label className="mb-2">Quantity</Label>
        <ProductQuantity 
          onChange={setQuantity} 
          initialQuantity={1}
        />
      </div>
      
      <AddToCart product={product} quantity={quantity} />
    </div>
  );
}