import type { SVGProps } from "react";

type IconProps = SVGProps<SVGSVGElement> & { size?: number };

function base({ size = 16, ...props }: IconProps) {
  return {
    width: size,
    height: size,
    viewBox: "0 0 24 24",
    fill: "none",
    stroke: "currentColor",
    strokeWidth: 1.8,
    strokeLinecap: "round" as const,
    strokeLinejoin: "round" as const,
    "aria-hidden": true,
    focusable: false,
    ...props,
  };
}

export function LogoMark({ size = 26, ...props }: IconProps) {
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 32 32"
      fill="none"
      aria-hidden="true"
      focusable="false"
      {...props}
    >
      <defs>
        <linearGradient id="boardly-mark-gradient" x1="4" y1="2" x2="28" y2="30" gradientUnits="userSpaceOnUse">
          <stop stopColor="#12837c" />
          <stop offset="1" stopColor="#1d4f8f" />
        </linearGradient>
      </defs>
      <rect x="1.5" y="1.5" width="29" height="29" rx="8.5" fill="url(#boardly-mark-gradient)" />
      <rect x="7.4" y="8.6" width="4.2" height="9.4" rx="2.1" fill="#ffffff" opacity="0.92" />
      <rect x="13.9" y="8.6" width="4.2" height="14.8" rx="2.1" fill="#ffffff" />
      <rect x="20.4" y="8.6" width="4.2" height="6.4" rx="2.1" fill="#ffffff" opacity="0.72" />
    </svg>
  );
}

export function IconSearch(props: IconProps) {
  return (
    <svg {...base(props)}>
      <circle cx="10.5" cy="10.5" r="6" />
      <path d="m20 20-4.9-4.9" />
    </svg>
  );
}

export function IconClose(props: IconProps) {
  return (
    <svg {...base(props)}>
      <path d="M6 6l12 12M18 6 6 18" />
    </svg>
  );
}

export function IconChevronDown(props: IconProps) {
  return (
    <svg {...base(props)}>
      <path d="m6 9 6 6 6-6" />
    </svg>
  );
}

export function IconCalendar(props: IconProps) {
  return (
    <svg {...base(props)}>
      <rect x="3.5" y="5" width="17" height="15.5" rx="2.5" />
      <path d="M3.5 9.5h17M8 3.5V6M16 3.5V6" />
    </svg>
  );
}

export function IconCheck(props: IconProps) {
  return (
    <svg {...base(props)}>
      <path d="m5 12.5 4.5 4.5L19 7" />
    </svg>
  );
}

export function IconChecklist(props: IconProps) {
  return (
    <svg {...base(props)}>
      <path d="M4 6.5 6 8.5l3.5-4" />
      <path d="M4 15.5l2 2 3.5-4" />
      <path d="M13 7h7M13 16h7" />
    </svg>
  );
}

export function IconAlert(props: IconProps) {
  return (
    <svg {...base(props)}>
      <circle cx="12" cy="12" r="8.5" />
      <path d="M12 7.5v5.5" />
      <path d="M12 16.4v.2" strokeWidth={2.4} />
    </svg>
  );
}

export function IconInfo(props: IconProps) {
  return (
    <svg {...base(props)}>
      <circle cx="12" cy="12" r="8.5" />
      <path d="M12 11v5.5" />
      <path d="M12 7.6v.2" strokeWidth={2.4} />
    </svg>
  );
}

export function IconPlus(props: IconProps) {
  return (
    <svg {...base(props)}>
      <path d="M12 5v14M5 12h14" />
    </svg>
  );
}

export function IconGrip(props: IconProps) {
  return (
    <svg {...base(props)} strokeWidth={2.2}>
      <path d="M9 6.5h.01M15 6.5h.01M9 12h.01M15 12h.01M9 17.5h.01M15 17.5h.01" />
    </svg>
  );
}

export function IconUndo(props: IconProps) {
  return (
    <svg {...base(props)}>
      <path d="M8.5 6 4.5 10l4 4" />
      <path d="M4.5 10h9a6 6 0 0 1 0 12h-2" />
    </svg>
  );
}

export function IconReset(props: IconProps) {
  return (
    <svg {...base(props)}>
      <path d="M20 12a8 8 0 1 1-2.4-5.7" />
      <path d="M20 4v4.5h-4.5" />
    </svg>
  );
}

export function IconTrash(props: IconProps) {
  return (
    <svg {...base(props)}>
      <path d="M4.5 6.5h15" />
      <path d="M9.5 6.5V4.8c0-.7.6-1.3 1.3-1.3h2.4c.7 0 1.3.6 1.3 1.3v1.7" />
      <path d="M6.5 6.5 7.4 19a1.6 1.6 0 0 0 1.6 1.5h6a1.6 1.6 0 0 0 1.6-1.5l.9-12.5" />
      <path d="M10 10.5v6M14 10.5v6" />
    </svg>
  );
}

export function IconFlag(props: IconProps) {
  return (
    <svg {...base(props)}>
      <path d="M6 21V4.5" />
      <path d="M6 5c2.8-1.8 5.6-2 8.4-.7 1.4.7 2.8.9 4.1.5v7.6c-1.3.4-2.7.2-4.1-.5-2.8-1.3-5.6-1.1-8.4.7" />
    </svg>
  );
}

export function IconMove(props: IconProps) {
  return (
    <svg {...base(props)}>
      <path d="M4 9h13M13.5 4.5 18 9l-4.5 4.5" />
      <path d="M20 15H7M10.5 10.5 6 15l4.5 4.5" />
    </svg>
  );
}

export function IconPerson(props: IconProps) {
  return (
    <svg {...base(props)}>
      <circle cx="12" cy="8" r="3.5" />
      <path d="M5 20c.8-3.4 3.6-5.5 7-5.5s6.2 2.1 7 5.5" />
    </svg>
  );
}

export function IconFilter(props: IconProps) {
  return (
    <svg {...base(props)}>
      <path d="M4 6h16l-6.2 7.2V19l-3.6 1.8v-7.6L4 6Z" />
    </svg>
  );
}

export function IconBoard(props: IconProps) {
  return (
    <svg {...base(props)}>
      <rect x="3.5" y="4" width="5" height="16" rx="1.6" />
      <rect x="9.8" y="4" width="5" height="10.5" rx="1.6" />
      <rect x="16.1" y="4" width="4.4" height="13" rx="1.6" />
    </svg>
  );
}

export function IconBolt(props: IconProps) {
  return (
    <svg {...base(props)}>
      <path d="M13 3 5.5 13.5H11L9.5 21l8-11H12L13 3Z" />
    </svg>
  );
}