// Add a grip icon for drag handles
const ICON_PROPS_G = {
  viewBox: "0 0 24 24",
  fill: "none",
  stroke: "currentColor",
  strokeWidth: 1.7,
  strokeLinecap: "round",
  strokeLinejoin: "round",
};

const IconGrip = (props) => (
  <svg {...ICON_PROPS_G} {...props}>
    <circle cx="9" cy="6" r="1.2" fill="currentColor" stroke="none"/>
    <circle cx="9" cy="12" r="1.2" fill="currentColor" stroke="none"/>
    <circle cx="9" cy="18" r="1.2" fill="currentColor" stroke="none"/>
    <circle cx="15" cy="6" r="1.2" fill="currentColor" stroke="none"/>
    <circle cx="15" cy="12" r="1.2" fill="currentColor" stroke="none"/>
    <circle cx="15" cy="18" r="1.2" fill="currentColor" stroke="none"/>
  </svg>
);

const IconUpload = (props) => (
  <svg {...ICON_PROPS_G} {...props}>
    <path d="M12 4v12M7 9l5-5 5 5"/>
    <path d="M5 17v2a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2"/>
  </svg>
);

const IconCameraBody = (props) => (
  <svg {...ICON_PROPS_G} {...props}>
    <rect x="3" y="7" width="15" height="12" rx="2"/>
    <path d="M18 11l3-2v8l-3-2z"/>
    <circle cx="10.5" cy="13" r="2.5"/>
    <path d="M7 7l1-2h5l1 2"/>
  </svg>
);

const IconAngle = (props) => (
  <svg {...ICON_PROPS_G} {...props}>
    <path d="M5 19h15"/>
    <path d="M5 19L19 5"/>
    <path d="M5 19v-3"/>
    <path d="M9 19a4 4 0 0 0 0-3"/>
  </svg>
);

const IconShotType = (props) => (
  <svg {...ICON_PROPS_G} {...props}>
    <path d="M4 4L12 18l8 -14"/>
    <path d="M9 6a5 5 0 0 0 6 0"/>
    <circle cx="12" cy="18" r="1" fill="currentColor" stroke="none"/>
  </svg>
);

window.IconGrip = IconGrip;
window.IconUpload = IconUpload;
window.IconCameraBody = IconCameraBody;
window.IconAngle = IconAngle;
window.IconShotType = IconShotType;