'use client';

import * as React from 'react';
import { useTheme } from 'next-themes';
import * as SegmentedControl from '@/components/ui/segmented-control';
import { SlidersHorizontal, Moon, Sun } from 'lucide-react';

export default function ThemeSwitch() {
  const [mounted, setMounted] = React.useState(false);
  const { theme, setTheme } = useTheme();

  React.useEffect(() => {
    setMounted(true);
  }, []);

  // Render placeholder with same dimensions to avoid layout shift
  if (!mounted) {
    return <div className='rounded-10 bg-bg-weak-50 h-9 w-27' aria-hidden />;
  }

  return (
    <SegmentedControl.Root value={theme} onValueChange={setTheme}>
      <SegmentedControl.List>
        <SegmentedControl.Trigger value='light' className='aspect-square'>
          <Sun className='size-4' />
        </SegmentedControl.Trigger>
        <SegmentedControl.Trigger value='dark' className='aspect-square'>
          <Moon className='size-4' />
        </SegmentedControl.Trigger>
        <SegmentedControl.Trigger value='system' className='aspect-square'>
          <SlidersHorizontal className='size-4' />
        </SegmentedControl.Trigger>
      </SegmentedControl.List>
    </SegmentedControl.Root>
  );
}