type TitleBarProps = {
  variant?: 'default' | 'light';
};

export default function TitleBar({ variant = 'default' }: TitleBarProps) {
  const platform = (window as any).api?.platform ?? '';

  if (platform === 'linux') return null;

  const iconColorClass =
    variant === 'light' ? 'text-white' : 'text-[#525866] dark:text-gray-300';
  const borderColorClass =
    variant === 'light' ? 'border-b-white/30' : 'border-b-gray-300 dark:border-gray-700';

  if (platform === 'darwin') {
    return (
      <div
        className={['drag-region h-10 shrink-0 border-b', borderColorClass].join(' ')}
        style={{ background: 'transparent' }}
      />
    );
  }

  return (
    <div
      className={['drag-region flex h-10 shrink-0 items-center justify-end border-b', borderColorClass].join(
        ' ',
      )}
      style={{ background: 'transparent' }}
    >
      <div className="no-drag flex h-full">
        <button
          type="button"
          className={['flex h-full w-11 items-center justify-center hover:bg-[#999] hover:text-white transition-colors', iconColorClass].join(
            ' ',
          )}
          title="Minimize"
          onClick={() => {
            (window as any).api?.windowMinimize?.();
          }}
        >
          <span className="text-base leading-none">−</span>
        </button>
        <button
          type="button"
          className={['flex h-full w-11 items-center justify-center hover:bg-[#999] hover:text-white transition-colors', iconColorClass].join(
            ' ',
          )}
          title="Maximize"
          onClick={() => {
            (window as any).api?.windowMaximize?.();
          }}
        >
          <span className="text-[14px] leading-none">▢</span>
        </button>
        <button
          type="button"
          className={['flex h-full w-11 items-center justify-center hover:bg-[#ff0000] hover:text-white transition-colors', iconColorClass].join(
            ' ',
          )}
          title="Close"
          onClick={() => {
            (window as any).api?.windowClose?.();
          }}
        >
          <span className="text-base leading-none">×</span>
        </button>
      </div>
    </div>
  );
}