type ArtworkProps = {
  type: "estate" | "build" | "society";
};

export default function ProductArtwork({ type }: ArtworkProps) {
  if (type === "build") {
    return <BuildArtwork />;
  }

  if (type === "society") {
    return <SocietyArtwork />;
  }

  return <EstateArtwork />;
}

function EstateArtwork() {
  return (
    <svg aria-hidden="true" viewBox="0 0 250 215" className="h-full w-full">
      <defs>
        <linearGradient id="estate-main" x1="0" x2="1" y1="0" y2="1">
          <stop stopColor="#C7B9FF" />
          <stop offset="1" stopColor="#7564F7" />
        </linearGradient>
        <linearGradient id="estate-light" x1="0" x2="1">
          <stop stopColor="#F2EEFF" />
          <stop offset="1" stopColor="#D8CFFF" />
        </linearGradient>
      </defs>
      <ellipse cx="135" cy="200" rx="112" ry="11" fill="#DCD7FF" opacity=".55" />
      <path d="M28 183h201" stroke="#B4A8FF" strokeWidth="2" />
      <path d="M93 93 158 57v130H93Z" fill="url(#estate-main)" stroke="#7463F5" strokeWidth="2" />
      <path d="m158 57 42 20v110h-42Z" fill="#6554DF" opacity=".92" />
      <path d="M47 139 94 116v71H47Z" fill="url(#estate-light)" stroke="#9D8EFF" strokeWidth="2" />
      <path d="M200 118 225 132v55h-25Z" fill="#BFB4FF" stroke="#7B6AF4" strokeWidth="2" />
      {[
        [106, 88],
        [126, 77],
        [106, 111],
        [126, 100],
        [106, 134],
        [126, 123],
        [106, 157],
        [126, 146],
      ].map(([x, y]) => (
        <rect key={`${x}-${y}`} x={x} y={y} width="10" height="13" rx="1.5" fill="#F8F7FF" opacity=".9" />
      ))}
      {[
        [169, 83],
        [184, 90],
        [169, 108],
        [184, 115],
        [169, 133],
        [184, 140],
        [169, 158],
        [184, 165],
      ].map(([x, y]) => (
        <rect key={`${x}-${y}`} x={x} y={y} width="9" height="12" rx="1.5" fill="#E9E4FF" opacity=".88" />
      ))}
      <path d="M40 187h193M57 178h20v9M208 174h13v13" stroke="#8C7BFA" strokeWidth="2" />
      <path d="M14 183c14-3 16-13 19-27 4 12 8 24 19 27M217 183c9-3 11-11 13-22 3 9 6 19 14 22" stroke="#B2A6FF" strokeWidth="2" />
    </svg>
  );
}

function BuildArtwork() {
  return (
    <svg aria-hidden="true" viewBox="0 0 265 220" className="h-full w-full">
      <defs>
        <linearGradient id="build-main" x1="0" x2="1" y1="0" y2="1">
          <stop stopColor="#BAD3FF" />
          <stop offset="1" stopColor="#4474EC" />
        </linearGradient>
      </defs>
      <ellipse cx="140" cy="203" rx="118" ry="11" fill="#C8DBFF" opacity=".55" />
      <path d="M27 190h220" stroke="#9CBBFF" strokeWidth="2" />
      <path d="M111 84h82v106h-82Z" fill="url(#build-main)" opacity=".88" />
      <path d="M98 103h111M98 127h111M98 151h111M98 175h111" stroke="#3F6FE5" strokeWidth="3" />
      <path d="M119 84v106M145 84v106M171 84v106M197 84v106" stroke="#5B85EB" strokeWidth="3" />
      <path d="M58 37h13v153H58ZM64 37h120M64 54h89" stroke="#416DDA" strokeWidth="4" />
      <path d="m184 37 34 18h-66ZM64 37l38 17H64ZM199 47v34" stroke="#416DDA" strokeWidth="3" />
      <path d="m193 81 6 12 6-12" fill="#F8B84D" stroke="#E49A24" strokeWidth="2" />
      <path d="M38 190v-51h43v51M222 190v-79h18v79" fill="#DCE8FF" stroke="#7FA2EF" strokeWidth="2" />
      <path d="M22 190c13-3 15-12 18-25 4 11 7 22 17 25" stroke="#A6C1F8" strokeWidth="2" />
    </svg>
  );
}

function SocietyArtwork() {
  return (
    <svg aria-hidden="true" viewBox="0 0 260 220" className="h-full w-full">
      <defs>
        <linearGradient id="society-main" x1="0" x2="1" y1="0" y2="1">
          <stop stopColor="#BBF0DB" />
          <stop offset="1" stopColor="#35B97E" />
        </linearGradient>
      </defs>
      <ellipse cx="139" cy="203" rx="120" ry="11" fill="#C8F1D9" opacity=".64" />
      <path d="M25 190h224" stroke="#81D6A6" strokeWidth="2" />
      <path d="M123 57 178 33v157h-55Z" fill="url(#society-main)" stroke="#34AA76" strokeWidth="2" />
      <path d="m178 33 48 23v134h-48Z" fill="#28A871" opacity=".94" />
      <path d="M75 101 123 78v112H75Z" fill="#D9F7E8" stroke="#53BF86" strokeWidth="2" />
      {[
        [136, 69],
        [155, 61],
        [136, 94],
        [155, 86],
        [136, 119],
        [155, 111],
        [136, 144],
        [155, 136],
        [136, 169],
        [155, 161],
      ].map(([x, y]) => (
        <rect key={`${x}-${y}`} x={x} y={y} width="10" height="14" rx="1.5" fill="#F5FFFA" opacity=".95" />
      ))}
      {[
        [190, 62],
        [207, 69],
        [190, 91],
        [207, 98],
        [190, 120],
        [207, 127],
        [190, 149],
        [207, 156],
      ].map(([x, y]) => (
        <rect key={`${x}-${y}`} x={x} y={y} width="9" height="13" rx="1.5" fill="#D9F5E8" />
      ))}
      <path d="M42 190c15-4 18-18 21-34 5 15 9 29 22 34M214 190c10-4 12-14 14-25 3 11 6 21 15 25" stroke="#3BAF76" strokeWidth="3" />
      <path d="M31 190c8-3 10-11 12-21 3 9 5 17 12 21" stroke="#68C995" strokeWidth="2" />
      <path d="M87 190v-16h20v16" fill="#F2FFF7" stroke="#46B77E" strokeWidth="2" />
    </svg>
  );
}
