import React, { useState } from 'react';
import { ChevronDown, ChevronUp } from 'lucide-react';
import { Card } from '../Card';
import { Badge } from '../Badge';

export interface SettingSectionProps {
  title: string;
  description?: string;
  icon?: React.ReactNode;
  badge?: {
    text: string;
    variant?: 'default' | 'success' | 'warning' | 'danger' | 'info';
  };
  collapsible?: boolean;
  defaultOpen?: boolean;
  children: React.ReactNode;
  className?: string;
  headerAction?: React.ReactNode;
}

const SettingSection: React.FC<SettingSectionProps> = ({
  title,
  description,
  icon,
  badge,
  collapsible = false,
  defaultOpen = true,
  children,
  className = '',
  headerAction,
}) => {
  const [isOpen, setIsOpen] = useState(defaultOpen);

  const handleToggle = () => {
    if (collapsible) {
      setIsOpen(!isOpen);
    }
  };

  return (
    <Card className={`overflow-hidden ${className}`}>
      {/* Header */}
      <div
        className={`
          px-4 sm:px-6 py-4
          ${collapsible ? 'cursor-pointer hover:bg-[var(--bg-secondary)]' : ''}
          transition-colors
        `}
        onClick={handleToggle}
      >
        <div className="flex items-start justify-between gap-4">
          <div className="flex items-start gap-3 flex-1 min-w-0">
            {icon && (
              <div className="flex-shrink-0 mt-0.5 text-[var(--color-primary)]">
                {icon}
              </div>
            )}

            <div className="flex-1 min-w-0">
              <div className="flex items-center gap-2 mb-1">
                <h3 className="text-base sm:text-lg font-semibold text-[var(--text-primary)]">
                  {title}
                </h3>

                {badge && (
                  <Badge variant={badge.variant || 'default'} size="sm">
                    {badge.text}
                  </Badge>
                )}

                {collapsible && (
                  <div className="ml-auto flex-shrink-0">
                    {isOpen ? (
                      <ChevronUp className="w-5 h-5 text-[var(--text-secondary)]" />
                    ) : (
                      <ChevronDown className="w-5 h-5 text-[var(--text-secondary)]" />
                    )}
                  </div>
                )}
              </div>

              {description && (
                <p className="text-sm text-[var(--text-secondary)] mt-1">
                  {description}
                </p>
              )}
            </div>
          </div>

          {headerAction && !collapsible && (
            <div className="flex-shrink-0">
              {headerAction}
            </div>
          )}
        </div>
      </div>

      {/* Content */}
      {(!collapsible || isOpen) && (
        <div className="border-t border-[var(--border-primary)]">
          {children}
        </div>
      )}
    </Card>
  );
};

export default SettingSection;
