'use client';
import { Button } from '@/components/ui/button';
import { ColorPalletePicker } from '@/src/components/colors/ColorPalletePicker';
import { Typography } from '@/src/components/typography/Typography';
import { Palette, Type } from 'lucide-react';
import { Slider } from './common/Slider';

const settingsPanels = [
  {
    id: 'theme',
    icon: <Palette className='w-4 h-4' />,
    label: 'Theme',
    component: <ColorPalletePicker />,
  },
  {
    id: 'typography',
    icon: <Type className='w-4 h-4' />,
    label: 'Typography',
    component: <Typography />,
  },
] as const;

interface SettingsButtonsProps {
  onPanelSelect: (panelId: string) => void;
  activePanel: string | null;
  onToggleOpen: () => void;
}

export function SettingsButtons({ onPanelSelect, activePanel, onToggleOpen }: SettingsButtonsProps) {
  return (
    <div className='flex items-center space-x-2'>
      {settingsPanels.map((panel) => (
        <Button
          key={panel.id}
          variant='ghost'
          size='sm'
          className='flex items-center gap-2 text-white hover:text-white'
          onClick={() => {
            if (activePanel === panel.id) {
              onToggleOpen();
            } else {
              onPanelSelect(panel.id);
            }
          }}
        >
          {panel.icon}
          <span>{panel.label}</span>
        </Button>
      ))}
    </div>
  );
}

interface SettingsPanelProps {
  activePanel: string | null;
  onClose: () => void;
  isOpen: boolean;
  onToggleOpen: () => void;
}

export function SettingsPanel({ activePanel, onClose, isOpen, onToggleOpen }: SettingsPanelProps) {
  if (!activePanel) return null;

  return (
    <Slider
      isOpen={isOpen}
      onToggle={onToggleOpen}
      side='left'
      title={settingsPanels.find((panel) => panel.id === activePanel)?.label ?? ''}
      handleClose={onClose}
    >
      <div className='p-4'>{settingsPanels.find((panel) => panel.id === activePanel)?.component}</div>
    </Slider>
  );
}
