import type { ComponentType } from 'react';
import type { LucideIcon } from 'lucide-react';
import { RefreshCw } from 'lucide-react';
import { useGlobal } from 'hooks/useGlobal';

type UserAppHeaderProps = { panelId: string };

export const createUserAppHeader = (name: string, Icon: LucideIcon): ComponentType<UserAppHeaderProps> => {
  const UserAppHeader = ({ panelId }: UserAppHeaderProps) => {
    const iframeRefreshKey = `USER_APP_REFRESH_${panelId}`;
    const [, setRefresh] = useGlobal<number>(iframeRefreshKey, 0);

    return (
      <>
        <Icon className="h-3.5 w-3.5 text-duck-teal shrink-0" />
        <span className="text-xs font-medium shrink-0">{name}</span>
        <button
          type="button"
          onClick={() => setRefresh((k) => k + 1)}
          className="p-0.5 rounded hover:bg-black/10 transition-colors cursor-pointer shrink-0"
          title="Refresh"
        >
          <RefreshCw className="h-3 w-3" />
        </button>
      </>
    );
  };

  UserAppHeader.displayName = `UserAppHeader(${name})`;
  return UserAppHeader;
};
