import { Button, Chip } from '@heroui/react';
import { Moon, Sun } from 'lucide-react';
import { useEffect, useState } from 'react';

type Props = {
  guildName: string;
  statusMessage?: string;
  children?: React.ReactNode;
};

export function Topbar({ guildName, statusMessage, children }: Props) {
  const [dark, setDark] = useState(() => localStorage.getItem('papo-theme') !== 'light');

  useEffect(() => {
    document.documentElement.classList.toggle('dark', dark);
    localStorage.setItem('papo-theme', dark ? 'dark' : 'light');
  }, [dark]);

  return (
    <div className="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
      <div>
        <h1 className="text-2xl font-bold tracking-tight">{guildName}</h1>
        <p className="mt-1 text-sm text-muted">Bot-Dashboard Verwaltung</p>
      </div>
      <div className="flex items-center gap-3">
        {statusMessage && (
          <Chip color="warning" size="sm" variant="soft">{statusMessage}</Chip>
        )}
        <Button isIconOnly size="sm" variant="ghost" onPress={() => setDark((d) => !d)}>
          {dark ? <Sun size={16} /> : <Moon size={16} />}
        </Button>
        {children}
      </div>
    </div>
  );
}