"use client";

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

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

export const ConceptTarget: React.FC<IllustrationProps> = ({
  className = "",
  delay: _delay = 0,
}) => (
  <svg
    className={className}
    viewBox="0 0 120 120"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <motion.circle
      cx="60"
      cy="60"
      r="50"
      stroke="currentColor"
      strokeWidth="1"
      className="text-slate-300"
      animate={{ scale: [1, 1.05, 1] }}
      transition={{ duration: 4, repeat: Infinity }}
    />
    <motion.circle
      cx="60"
      cy="60"
      r="30"
      stroke="currentColor"
      strokeWidth="1"
      className="text-slate-400"
    />
    <motion.circle
      cx="60"
      cy="60"
      r="10"
      className="fill-slate-900"
      animate={{ opacity: [0.5, 1, 0.5] }}
      transition={{ duration: 2, repeat: Infinity }}
    />
  </svg>
);
