/**
 * EN: Component showcase wrapper with code preview
 * VI: Wrapper showcase component kèm code preview
 *
 * Displays component demo with optional code snippet
 * Hiển thị demo component với tùy chọn xem code snippet
 */
'use client';

import { useState } from 'react';
import CodeBlock from './CodeBlock';

interface ComponentShowcaseProps {
    title: string;
    description?: string;
    code: string;
    children: React.ReactNode;
    darkBg?: boolean; // EN: For light components on dark background / VI: Cho light components trên dark background
}

export default function ComponentShowcase({
    title,
    description,
    code,
    children,
    darkBg = false,
}: ComponentShowcaseProps) {
    const [showCode, setShowCode] = useState(false);

    return (
        <div className="glass-card p-6">
            {/* EN: Title and description / VI: Tiêu đề và mô tả */}
            <div className="mb-4">
                <h3 className="text-xl font-semibold text-text-primary">{title}</h3>
                {description && (
                    <p className="text-text-tertiary text-sm mt-1">{description}</p>
                )}
            </div>

            {/* EN: Component Preview Area / VI: Khu vực preview component */}
            <div
                className={`rounded-lg border border-border-primary p-8 mb-4 ${darkBg ? 'bg-bg-primary' : 'bg-bg-secondary'
                    }`}
            >
                {children}
            </div>

            {/* EN: Toggle Code Button / VI: Nút toggle code */}
            <button
                onClick={() => setShowCode(!showCode)}
                className="glass-button text-sm"
            >
                {showCode ? 'Hide Code' : 'Show Code'}
            </button>

            {/* EN: Code Block / VI: Code block */}
            {showCode && (
                <div className="mt-4">
                    <CodeBlock code={code} language="tsx" />
                </div>
            )}
        </div>
    );
}
