import type { ReactNode } from 'react'

interface IconProps {
  size?: number
}

function Svg({ size = 13, children }: IconProps & { children: ReactNode }): React.JSX.Element {
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={2}
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden
    >
      {children}
    </svg>
  )
}

/** 插入（在页面前面插入新页） */
export function IconInsert({ size }: IconProps): React.JSX.Element {
  return (
    <Svg size={size}>
      <path d="M12 5v14" />
      <path d="M5 12h14" />
    </Svg>
  )
}

/** 上移 */
export function IconUp({ size }: IconProps): React.JSX.Element {
  return (
    <Svg size={size}>
      <polyline points="18 15 12 9 6 15" />
    </Svg>
  )
}

/** 下移 */
export function IconDown({ size }: IconProps): React.JSX.Element {
  return (
    <Svg size={size}>
      <polyline points="6 9 12 15 18 9" />
    </Svg>
  )
}

/** 复制 */
export function IconCopy({ size }: IconProps): React.JSX.Element {
  return (
    <Svg size={size}>
      <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
      <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
    </Svg>
  )
}

/** 删除 */
export function IconTrash({ size }: IconProps): React.JSX.Element {
  return (
    <Svg size={size}>
      <polyline points="3 6 5 6 21 6" />
      <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
      <line x1="10" y1="11" x2="10" y2="17" />
      <line x1="14" y1="11" x2="14" y2="17" />
    </Svg>
  )
}

/** 截图 / 相机 */
export function IconCamera({ size }: IconProps): React.JSX.Element {
  return (
    <Svg size={size}>
      <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" />
      <circle cx="12" cy="13" r="4" />
    </Svg>
  )
}
