'use client'
import { FC } from 'react'
import { Product } from '@/types/product.types'

interface DescriptionProps {
    product: Product
}

const Description: FC<DescriptionProps> = ({ product }) => {
    // تقسیم توضیحات به پاراگراف‌ها بر اساس خطوط جدید
    const descriptionParagraphs = product.description
        .split('\n')
        .filter(paragraph => paragraph.trim().length > 0)

    return (
        <div className="mt-12 sm:mt-16 w-full">
            <div className="flex items-center justify-end gap-3 flex-row-reverse">
                <h2 className="text-primary text-base sm:text-lg">توضیحات</h2>
                <div className="w-1 h-6 bg-primary rounded"></div>
            </div>

            <div className="mt-4 sm:mt-6 rounded-xl bg-white p-4 sm:p-6 max-h-[300px] sm:max-h-[420px] overflow-y-auto">
                <div className="text-xs sm:text-sm text-[#333333] leading-6 sm:leading-8 text-justify space-y-3 sm:space-y-4">
                    {descriptionParagraphs.map((paragraph, index) => (
                        <p key={index}>{paragraph}</p>
                    ))}
                </div>
            </div>
        </div>
    )
}

export default Description


