import React from 'react';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/Components/ui/card";
import TiptapEditor from '@/Components/TiptapEditor';
import { useTranslation } from '@/hooks/useTranslation';

export const DescriptionInfo = ({ data, setData }) => {
    const { t } = useTranslation();

    return (
        <Card className="shadow-sm">
            <CardHeader>
                <CardTitle>{t('Detailed Description')}</CardTitle>
                <CardDescription>
                    {t('Provide rich details, features, and specifications to attract buyers.')}
                </CardDescription>
            </CardHeader>
            <CardContent>
                <TiptapEditor 
                    value={data.description} 
                    onChange={(content) => setData('description', content)} 
                />
            </CardContent>
        </Card>
    );
};