'use client';

import { useEffect, useState } from 'react';

export function AnimatedDesktop() {
  const [svgContent, setSvgContent] = useState('');

  useEffect(() => {
    // SVG 파일을 fetch해서 내용을 가져옴
    fetch('/images/Desktop_SVG.svg')
      .then(res => res.text())
      .then(text => {
        // SVG 내용에 CSS 애니메이션을 추가
        const parser = new DOMParser();
        const svgDoc = parser.parseFromString(text, 'image/svg+xml');
        const svg = svgDoc.documentElement;

        // style 태그 추가
        const style = svgDoc.createElementNS('http://www.w3.org/2000/svg', 'style');
        style.textContent = `
          @keyframes rotate-circle {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
          }
          .rotating-element {
            animation: rotate-circle 4s linear infinite;
            transform-origin: center;
            transform-box: fill-box;
          }
        `;
        svg.insertBefore(style, svg.firstChild);

        // 회전시킬 요소 찾기 (fill="#38BDD4" and transform="translate(813,386)")
        const paths = svg.querySelectorAll('path');
        paths.forEach(path => {
          const fill = path.getAttribute('fill');
          const transform = path.getAttribute('transform');
          if (fill === '#38BDD4' && transform && transform.includes('translate(813,386)')) {
            path.classList.add('rotating-element');
          }
        });

        // 수정된 SVG를 문자열로 변환
        const serializer = new XMLSerializer();
        const modifiedSvg = serializer.serializeToString(svg);
        setSvgContent(modifiedSvg);
      })
      .catch(console.error);
  }, []);

  return (
    <div
      className="relative w-full h-full flex items-center justify-center"
      dangerouslySetInnerHTML={{ __html: svgContent }}
    />
  );
}