import { ImageResponse } from "next/og";

export const size = { width: 32, height: 32 };
export const contentType = "image/png";

export default function Icon() {
  return new ImageResponse(
    (
      <div
        style={{
          width: 32,
          height: 32,
          borderRadius: 8,
          background: "linear-gradient(135deg, #7c3aed, #8b5cf6, #06b6d4)",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        <svg
          width={20}
          height={20}
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          {/* Scissors top blade */}
          <circle cx="6" cy="6" r="2.8" stroke="white" strokeWidth="1.6" fill="none" strokeOpacity="0.95" />
          <line x1="8.5" y1="8.5" x2="17" y2="17" stroke="white" strokeWidth="1.6" strokeLinecap="round" strokeOpacity="0.95" />
          {/* Scissors bottom blade */}
          <circle cx="6" cy="18" r="2.8" stroke="white" strokeWidth="1.6" fill="none" strokeOpacity="0.95" />
          <line x1="8.5" y1="15.5" x2="17" y2="7" stroke="white" strokeWidth="1.6" strokeLinecap="round" strokeOpacity="0.95" />
          {/* AI spark */}
          <circle cx="19" cy="5" r="1.4" fill="#67e8f9" />
          <line x1="19" y1="2.2" x2="19" y2="3.4" stroke="#67e8f9" strokeWidth="1.1" strokeLinecap="round" />
          <line x1="19" y1="6.6" x2="19" y2="7.8" stroke="#67e8f9" strokeWidth="1.1" strokeLinecap="round" />
          <line x1="16.2" y1="5" x2="17.4" y2="5" stroke="#67e8f9" strokeWidth="1.1" strokeLinecap="round" />
          <line x1="20.6" y1="5" x2="21.8" y2="5" stroke="#67e8f9" strokeWidth="1.1" strokeLinecap="round" />
        </svg>
      </div>
    ),
    { ...size }
  );
}