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

export const AspectRatioAnatomy = 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={76} width={279} height={149} rx={5} fill={palette[3]} />
      <path
        d="M185.223 154.868V153.347L191.935 142.727H193.038V145.084H192.293L187.222 153.108V153.227H196.26V154.868H185.223ZM192.412 158V154.406V153.697V142.727H194.172V158H192.412ZM200.49 156.046C200.122 156.046 199.807 155.914 199.543 155.651C199.28 155.387 199.148 155.072 199.148 154.704C199.148 154.336 199.28 154.02 199.543 153.757C199.807 153.493 200.122 153.362 200.49 153.362C200.858 153.362 201.174 153.493 201.437 153.757C201.701 154.02 201.832 154.336 201.832 154.704C201.832 154.947 201.77 155.171 201.646 155.375C201.527 155.579 201.365 155.743 201.161 155.867C200.962 155.987 200.739 156.046 200.49 156.046ZM200.49 148.32C200.122 148.32 199.807 148.189 199.543 147.925C199.28 147.662 199.148 147.346 199.148 146.978C199.148 146.61 199.28 146.294 199.543 146.031C199.807 145.767 200.122 145.636 200.49 145.636C200.858 145.636 201.174 145.767 201.437 146.031C201.701 146.294 201.832 146.61 201.832 146.978C201.832 147.222 201.77 147.445 201.646 147.649C201.527 147.853 201.365 148.017 201.161 148.141C200.962 148.261 200.739 148.32 200.49 148.32ZM210.241 158.209C209.256 158.209 208.379 158.04 207.608 157.702C206.843 157.364 206.234 156.894 205.781 156.292C205.334 155.686 205.09 154.982 205.05 154.182H206.93C206.969 154.674 207.138 155.099 207.437 155.457C207.735 155.81 208.125 156.083 208.608 156.277C209.09 156.471 209.624 156.568 210.211 156.568C210.867 156.568 211.449 156.454 211.956 156.225C212.463 155.996 212.861 155.678 213.149 155.271C213.437 154.863 213.582 154.391 213.582 153.854C213.582 153.292 213.442 152.797 213.164 152.37C212.886 151.937 212.478 151.599 211.941 151.355C211.404 151.112 210.748 150.99 209.972 150.99H208.749V149.349H209.972C210.579 149.349 211.111 149.24 211.568 149.021C212.03 148.803 212.391 148.494 212.649 148.097C212.913 147.699 213.045 147.232 213.045 146.695C213.045 146.178 212.93 145.728 212.702 145.345C212.473 144.962 212.15 144.664 211.732 144.45C211.32 144.236 210.832 144.129 210.271 144.129C209.744 144.129 209.246 144.226 208.779 144.42C208.317 144.609 207.939 144.885 207.646 145.248C207.352 145.606 207.193 146.038 207.168 146.545H205.378C205.408 145.745 205.649 145.044 206.102 144.442C206.554 143.836 207.146 143.364 207.877 143.026C208.612 142.687 209.42 142.518 210.3 142.518C211.245 142.518 212.055 142.71 212.731 143.093C213.408 143.471 213.927 143.97 214.29 144.592C214.653 145.213 214.834 145.884 214.834 146.605C214.834 147.465 214.608 148.199 214.156 148.805C213.708 149.412 213.099 149.832 212.329 150.065V150.185C213.293 150.344 214.046 150.754 214.588 151.415C215.13 152.071 215.401 152.884 215.401 153.854C215.401 154.684 215.175 155.43 214.723 156.091C214.275 156.747 213.664 157.264 212.888 157.642C212.112 158.02 211.23 158.209 210.241 158.209Z"
        fill={palette[0]}
      />
    </svg>
  )
})
