/**
 * Component Template
 * 
 * Copy this file to create a new component:
 * 1. cp src/templates/ComponentTemplate.tsx src/components/MyComponent.tsx
 * 2. Rename the component and update props interface
 */

import { ReactNode } from 'react';

interface ComponentTemplateProps {
    /** Required: Main content or children */
    children?: ReactNode;
    /** Optional: Custom CSS classes */
    className?: string;
    /** Optional: Variant style */
    variant?: 'default' | 'outlined' | 'ghost';
    /** Optional: Size variant */
    size?: 'sm' | 'md' | 'lg';
    /** Optional: Click handler */
    onClick?: () => void;
    /** Optional: Disabled state */
    disabled?: boolean;
}

const variantStyles = {
    default: 'bg-[var(--color-primary)] text-white hover:bg-[var(--color-primary-hover)]',
    outlined: 'border border-emerald-600 text-[var(--color-primary)] hover:bg-emerald-50 dark:hover:bg-emerald-900/20',
    ghost: 'text-[var(--color-primary)] hover:bg-emerald-50 dark:hover:bg-emerald-900/20',
};

const sizeStyles = {
    sm: 'px-3 py-1.5 text-sm',
    md: 'px-4 py-2 text-sm',
    lg: 'px-6 py-3 text-base',
};

export function ComponentTemplate({
    children,
    className = '',
    variant = 'default',
    size = 'md',
    onClick,
    disabled = false,
}: ComponentTemplateProps) {
    return (
        <button
            onClick={onClick}
            disabled={disabled}
            className={`
                inline-flex items-center justify-center gap-2 
                rounded-lg font-medium transition-all
                disabled:opacity-50 disabled:cursor-not-allowed
                ${variantStyles[variant]}
                ${sizeStyles[size]}
                ${className}
            `}
        >
            {children}
        </button>
    );
}
