import React, { useState } from 'react';

interface SettingsTabsProps {
  general: React.ReactNode;
  style: React.ReactNode;
  advanced: React.ReactNode;
}

export const SettingsTabs: React.FC<SettingsTabsProps> = ({ general, style, advanced }) => {
  const [tab, setTab] = useState<'general' | 'style' | 'advanced'>('general');

  return (
    <div>
      <div className="settings-tabs">
        <button className={tab === 'general' ? 'active' : ''} onClick={() => setTab('general')}>General</button>
        <button className={tab === 'style' ? 'active' : ''} onClick={() => setTab('style')}>Style</button>
        <button className={tab === 'advanced' ? 'active' : ''} onClick={() => setTab('advanced')}>Advanced</button>
      </div>
      <div className="settings-content">
        {tab === 'general' && general}
        {tab === 'style' && style}
        {tab === 'advanced' && advanced}
      </div>
    </div>
  );
};
