import type { ReactNode } from 'react';

interface IconProps {
  size?: number;
  className?: string;
}

function LucideSvg({ size = 16, className, children }: IconProps & { children: ReactNode }) {
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className}
      aria-hidden
    >
      {children}
    </svg>
  );
}

/** 참고 사이트 lucide `users` */
export function UsersIcon({ size = 16, className }: IconProps) {
  return (
    <LucideSvg size={size} className={className}>
      <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
      <path d="M16 3.128a4 4 0 0 1 0 7.744" />
      <path d="M22 21v-2a4 4 0 0 0-3-3.87" />
      <circle cx="9" cy="7" r="4" />
    </LucideSvg>
  );
}

/** lucide `calendar` */
export function CalendarIcon({ size = 16, className }: IconProps) {
  return (
    <LucideSvg size={size} className={className}>
      <path d="M8 2v4" />
      <path d="M16 2v4" />
      <rect width="18" height="18" x="3" y="4" rx="2" />
      <path d="M3 10h18" />
    </LucideSvg>
  );
}

/** 참고 사이트 lucide `plus` */
export function PlusIcon({ size = 16, className }: IconProps) {
  return (
    <LucideSvg size={size} className={className}>
      <path d="M5 12h14" />
      <path d="M12 5v14" />
    </LucideSvg>
  );
}

function MonitorIcon({ size = 16, className }: IconProps) {
  return (
    <LucideSvg size={size} className={className}>
      <rect width="20" height="14" x="2" y="3" rx="2" />
      <line x1="8" x2="16" y1="21" y2="21" />
      <line x1="12" x2="12" y1="17" y2="21" />
    </LucideSvg>
  );
}

/** 참고 사이트 `dual-monitor-icon-wrap` — monitor 2개 겹침 */
export function DualMonitorIcon({ size = 16, className }: IconProps) {
  const monitorSize = size * 0.75;

  return (
    <div
      className={`dual-monitor-icon-wrap ${className ?? ''}`}
      style={{ width: size, height: size }}
      aria-hidden
    >
      <MonitorIcon size={monitorSize} className="m-icon m-back" />
      <MonitorIcon size={monitorSize} className="m-icon m-front" />
    </div>
  );
}
