صفحة التفاصيل تجمع الشرائح

import { useQuery } from '@tanstack/react-query';import { productQueries } from '@/entities/product';import { AddToCartButton } from '@/features/add-to-cart';import { WishlistButton } from '@/features/add-to-wishlist';interface Props {  productId: string;}export function ProductDetailsPage({  productId,}: Props) {  const { data: product, isPending, isError } =    useQuery(productQueries.detail(productId));  if (isPending) return <p>Loading product...</p>;  if (isError || !product) {    return <p>Could not load product.</p>;  }  return (    <main>      <img src={product.image} alt={product.title} />      <h1>{product.title}</h1>      <p>{product.price}</p>      <AddToCartButton productId={product.id} />      <WishlistButton productId={product.id} />    </main>  );}