import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { ChevronDown, ChevronUp } from 'lucide-react';

interface AdvancedOptionsSectionProps {
  children: React.ReactNode;
  title?: string;
  description?: string;
  defaultExpanded?: boolean;
}

export const AdvancedOptionsSection: React.FC<AdvancedOptionsSectionProps> = ({
  children,
  title = 'Advanced Options',
  description = 'These fields are optional but help improve data management',
  defaultExpanded = false,
}) => {
  const { t } = useTranslation('wizards');
  const [isExpanded, setIsExpanded] = useState(defaultExpanded);

  return (
    <div className="space-y-4">
      <button
        type="button"
        onClick={() => setIsExpanded(!isExpanded)}
        className="w-full py-3 px-4 border-2 border-dashed border-[var(--border-secondary)] rounded-lg text-[var(--text-secondary)] hover:border-[var(--color-primary)] hover:text-[var(--color-primary)] transition-colors inline-flex items-center justify-center gap-2 font-medium"
      >
        {isExpanded ? (
          <>
            <ChevronUp className="w-5 h-5" />
            {t('common.hide')} {title}
          </>
        ) : (
          <>
            <ChevronDown className="w-5 h-5" />
            {t('common.show')} {title}
          </>
        )}
      </button>

      {isExpanded && (
        <div className="space-y-4 p-4 border border-[var(--border-secondary)] rounded-lg bg-[var(--bg-secondary)]/30 animate-slideDown">
          {description && (
            <p className="text-sm text-[var(--text-secondary)] pb-2 border-b border-[var(--border-primary)]">
              {description}
            </p>
          )}
          {children}
        </div>
      )}

      <style>{`
        @keyframes slideDown {
          from {
            opacity: 0;
            transform: translateY(-10px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }
        .animate-slideDown {
          animation: slideDown 0.2s ease-out;
        }
      `}</style>
    </div>
  );
};
