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

export const PopoverAnatomy = 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={53} y={112} width={294} height={135} rx={6} fill={palette[3]} />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M71 134.5C71 132.015 73.0147 130 75.5 130H142.5C144.985 130 147 132.015 147 134.5C147 136.985 144.985 139 142.5 139H75.5C73.0147 139 71 136.985 71 134.5Z"
        fill={palette[15]}
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M71 157.5C71 155.015 73.0147 153 75.5 153H292.5C294.985 153 297 155.015 297 157.5C297 159.985 294.985 162 292.5 162H75.5C73.0147 162 71 159.985 71 157.5Z"
        fill={palette[5]}
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M71 174.5C71 172.015 73.0147 170 75.5 170H322.5C324.985 170 327 172.015 327 174.5C327 176.985 324.985 179 322.5 179H75.5C73.0147 179 71 176.985 71 174.5Z"
        fill={palette[5]}
      />
      <path
        d="M321.22 134.719C321.079 134.86 321 135.05 321 135.249C321 135.448 321.079 135.639 321.22 135.779C321.36 135.92 321.551 135.999 321.75 135.999C321.949 135.999 322.14 135.92 322.28 135.779L326.911 131.149C326.923 131.138 326.936 131.128 326.952 131.122C326.967 131.116 326.983 131.113 327 131.113C327.016 131.113 327.032 131.116 327.047 131.122C327.063 131.128 327.076 131.138 327.088 131.149L331.719 135.78C331.788 135.85 331.871 135.905 331.962 135.943C332.053 135.981 332.15 136 332.249 136C332.347 136 332.445 135.981 332.536 135.943C332.627 135.905 332.71 135.85 332.779 135.78C332.849 135.711 332.904 135.628 332.942 135.537C332.98 135.446 332.999 135.349 332.999 135.25C332.999 135.152 332.98 135.054 332.942 134.963C332.904 134.872 332.849 134.79 332.78 134.72L328.149 130.088C328.138 130.076 328.129 130.063 328.122 130.047C328.116 130.032 328.113 130.016 328.113 129.999C328.113 129.983 328.116 129.967 328.122 129.952C328.129 129.936 328.138 129.923 328.149 129.911L332.781 125.281C332.921 125.14 333 124.949 333 124.75C333 124.551 332.921 124.36 332.78 124.219C332.639 124.079 332.448 124 332.249 124C332.05 124 331.859 124.079 331.719 124.22L327.088 128.85C327.076 128.861 327.063 128.87 327.047 128.877C327.032 128.883 327.016 128.886 327 128.886C326.983 128.886 326.967 128.883 326.952 128.877C326.936 128.87 326.923 128.861 326.911 128.85L322.28 124.22C322.211 124.15 322.128 124.095 322.037 124.058C321.946 124.02 321.849 124 321.75 124C321.551 124 321.36 124.079 321.22 124.22C321.079 124.361 321 124.551 321 124.75C321 124.949 321.079 125.14 321.22 125.281L325.85 129.911C325.861 129.923 325.871 129.936 325.877 129.952C325.883 129.967 325.886 129.983 325.886 129.999C325.886 130.016 325.883 130.032 325.877 130.047C325.871 130.063 325.861 130.076 325.85 130.088L321.22 134.719Z"
        fill={palette[15]}
      />
      <rect x={254} y={203} width={72} height={29} rx={4} fill={palette[15]} />
      <path
        d="M198.586 102.414C199.367 101.633 200.633 101.633 201.414 102.414L211 112H189L198.586 102.414Z"
        fill={palette[3]}
      />
      <rect x={138} y={55} width={123} height={40} rx={8} fill={palette[5]} />
      <rect
        x={164.091}
        y={70}
        width={70.8182}
        height={10}
        rx={5}
        fill={palette[3]}
      />
    </svg>
  )
})
