'use client';

import { useRouter } from 'next/navigation';
import { ActionIcon } from 'rizzui';
import cn from '../utils/class-names';
import { PiGear, PiGearSixBold, PiGearSixDuotone, PiGearSixFill } from 'react-icons/pi';

export default function SettingsButton({
  className,
  children,
}: {
  className?: string;
  children?: React.ReactNode;
}) {
  const router = useRouter();

  return (
    <ActionIcon
      aria-label="Settings"
      variant="text"
      className={cn(
        'relative h-[34px] w-[34px] border border-gray-100 shadow-sm dark:bg-gray-100 md:h-9 md:w-9',
        className
      )}
      onClick={() => router.push('/settings/general')}
    >
      {children ? (
        children
      ) : (
          <PiGearSixFill className="h-[18px] w-auto"/>
      )}
    </ActionIcon>
  );
}