"use client";

/* eslint-disable no-unused-vars */

import * as React from "react";
import { motion } from "framer-motion";
import { IllustrationProps } from "./types";

export const ConceptWebsite: React.FC<IllustrationProps> = ({
  className = "",
  delay: _delay = 0,
}) => (
  <svg
    className={className}
    viewBox="0 0 120 120"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <rect
      x="10"
      y="20"
      width="100"
      height="80"
      rx="4"
      stroke="currentColor"
      strokeWidth="1"
      className="text-slate-400"
    />
    <motion.rect
      x="20"
      y="35"
      width="80"
      height="15"
      rx="2"
      className="fill-slate-200"
      animate={{ opacity: [0.3, 0.6, 0.3] }}
      transition={{ duration: 3, repeat: Infinity }}
    />
    <motion.g
      animate={{ y: [0, 10, 0] }}
      transition={{ duration: 4, repeat: Infinity }}
    >
      <rect
        x="20"
        y="55"
        width="35"
        height="35"
        rx="2"
        className="fill-slate-300"
      />
      <rect
        x="65"
        y="55"
        width="35"
        height="35"
        rx="2"
        className="fill-slate-300"
      />
    </motion.g>
  </svg>
);
