import { createComponent } from "./create-component"

export const AlertAnatomy = createComponent((props) => {
  const { palette, ...rest } = props
  return (
    <svg
      width={400}
      height={300}
      viewBox="0 0 400 300"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      {...rest}
    >
      <rect x={61} y={123} width={279} height={54} rx={5} fill={palette[3]} />
      <path
        d="M88 138C85.6266 138 83.3066 138.704 81.3332 140.022C79.3598 141.341 77.8217 143.215 76.9135 145.408C76.0052 147.601 75.7676 150.013 76.2306 152.341C76.6936 154.669 77.8365 156.807 79.5147 158.485C81.193 160.164 83.3312 161.306 85.6589 161.769C87.9867 162.232 90.3995 161.995 92.5922 161.087C94.7849 160.178 96.6591 158.64 97.9776 156.667C99.2962 154.693 100 152.373 100 150C99.9963 146.819 98.7308 143.768 96.4812 141.519C94.2316 139.269 91.1815 138.004 88 138V138ZM94.927 146.2L88.082 155.489C88.0012 155.596 87.8998 155.686 87.7838 155.754C87.6678 155.822 87.5395 155.865 87.4064 155.883C87.2733 155.9 87.138 155.891 87.0085 155.856C86.879 155.82 86.7578 155.76 86.652 155.677L81.764 151.769C81.6614 151.687 81.5761 151.585 81.5127 151.47C81.4494 151.355 81.4093 151.229 81.3948 151.098C81.3656 150.835 81.4422 150.57 81.608 150.363C81.7738 150.156 82.015 150.023 82.2787 149.994C82.5424 149.965 82.8069 150.041 83.014 150.207L87.09 153.468L93.317 145.017C93.392 144.905 93.489 144.808 93.6021 144.734C93.7153 144.66 93.8423 144.61 93.9754 144.587C94.1085 144.563 94.245 144.567 94.3767 144.598C94.5083 144.629 94.6323 144.686 94.7413 144.766C94.8502 144.846 94.9418 144.947 95.0105 145.063C95.0792 145.18 95.1235 145.309 95.1409 145.443C95.1582 145.577 95.1482 145.713 95.1115 145.843C95.0747 145.974 95.012 146.095 94.927 146.2Z"
        fill={palette[1]}
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M112 150C112 147.515 114.015 145.5 116.5 145.5H237.5C239.985 145.5 242 147.515 242 150C242 152.485 239.985 154.5 237.5 154.5H116.5C114.015 154.5 112 152.485 112 150Z"
        fill={palette[5]}
      />
    </svg>
  )
})
