133 lines
4.6 KiB
TypeScript
133 lines
4.6 KiB
TypeScript
"use client"
|
||
|
||
import Image from "next/image"
|
||
import { useState } from "react"
|
||
import { Heart, ShoppingCart, Minus, Plus } from "lucide-react"
|
||
import { Button } from "./ui/button"
|
||
import { useCart } from "@/contexts/cart-context"
|
||
import { useFavorites } from "@/contexts/favorites-context"
|
||
import type { Product } from "@/types/product"
|
||
import { ReviewList } from "./review-list"
|
||
import { ReviewForm } from "./review-form"
|
||
import { useAuth } from "@/contexts/auth-context"
|
||
import Link from "next/link"
|
||
|
||
interface ProductDetailProps {
|
||
product: Product
|
||
}
|
||
|
||
export function ProductDetail({ product }: ProductDetailProps) {
|
||
const [quantity, setQuantity] = useState(1)
|
||
const { addToCart, items } = useCart()
|
||
const { addToFavorites, removeFromFavorites, isFavorite } = useFavorites()
|
||
const { isLoggedIn } = useAuth()
|
||
|
||
const isInCart = items.some((item) => item.id === product.id)
|
||
|
||
const handleAddToCart = () => {
|
||
if (!isInCart) {
|
||
addToCart(
|
||
{
|
||
id: product.id,
|
||
title: product.title,
|
||
price: product.price,
|
||
},
|
||
quantity,
|
||
)
|
||
}
|
||
}
|
||
|
||
const handleToggleFavorite = () => {
|
||
if (isFavorite(product.id)) {
|
||
removeFromFavorites(product.id)
|
||
} else {
|
||
addToFavorites({
|
||
id: product.id,
|
||
title: product.title,
|
||
price: product.price,
|
||
})
|
||
}
|
||
}
|
||
|
||
return (
|
||
<div className="space-y-8">
|
||
<div className="flex flex-col md:flex-row gap-8">
|
||
<div className="md:w-1/2">
|
||
<Image
|
||
src={product.image_url || "/placeholder.svg"}
|
||
alt={product.title}
|
||
width={500}
|
||
height={500}
|
||
className="w-full h-auto object-cover rounded-lg"
|
||
/>
|
||
</div>
|
||
<div className="md:w-1/2 space-y-4">
|
||
<h1 className="text-3xl font-bold">{product.title}</h1>
|
||
{product.category === "software" && (
|
||
<div className="text-sm text-muted-foreground">
|
||
Тип лицензии: {product.licenseType === "perpetual" ? "Бессрочная" : "Подписка"}
|
||
</div>
|
||
)}
|
||
<div className="flex items-baseline gap-2">
|
||
<span className="text-2xl font-bold">{product.price} ₽</span>
|
||
</div>
|
||
<div className="flex items-center gap-4">
|
||
{!isInCart && (
|
||
<>
|
||
<div className="flex items-center gap-2">
|
||
<Button variant="outline" size="icon" onClick={() => setQuantity((prev) => Math.max(1, prev - 1))}>
|
||
<Minus className="h-4 w-4" />
|
||
</Button>
|
||
<span className="w-8 text-center">{quantity}</span>
|
||
<Button variant="outline" size="icon" onClick={() => setQuantity((prev) => prev + 1)}>
|
||
<Plus className="h-4 w-4" />
|
||
</Button>
|
||
</div>
|
||
<Button onClick={handleAddToCart} className="flex-1">
|
||
<ShoppingCart className="mr-2 h-4 w-4" /> Добавить в корзину
|
||
</Button>
|
||
</>
|
||
)}
|
||
{isInCart && (
|
||
<Button disabled className="flex-1">
|
||
Товар уже в корзине
|
||
</Button>
|
||
)}
|
||
<Button variant="outline" size="icon" onClick={handleToggleFavorite}>
|
||
<Heart className={`h-5 w-5 ${isFavorite(product.id) ? "fill-red-500 text-red-500" : ""}`} />
|
||
</Button>
|
||
</div>
|
||
<div className="border-t pt-4">
|
||
<h2 className="text-xl font-semibold mb-2">Описание</h2>
|
||
<p className="text-gray-600">
|
||
{product.description ||
|
||
"Подробное описание товара. Здесь может быть длинный текст с характеристиками и особенностями продукта."}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="border-t pt-8">
|
||
<h2 className="text-2xl font-bold mb-4">Отзывы</h2>
|
||
{isLoggedIn ? (
|
||
<>
|
||
<ReviewList productId={product.id} />
|
||
<div className="mt-8">
|
||
<h3 className="text-xl font-semibold mb-4">Оставить отзыв</h3>
|
||
<ReviewForm productId={product.id} />
|
||
</div>
|
||
</>
|
||
) : (
|
||
<p className="text-gray-600">
|
||
Чтобы просматривать и оставлять отзывы, пожалуйста,{" "}
|
||
<Link href="/login" className="text-blue-600 hover:underline">
|
||
войдите в систему
|
||
</Link>
|
||
.
|
||
</p>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|