import React, { useState, useEffect } from "react";

export default function CompassClock() {
  const [time, setTime] = useState(new Date());

  useEffect(() => {
    const timer = setInterval(() => setTime(new Date()), 1000);
    return () => clearInterval(timer);
  }, []);

  const h = time.getHours() % 12;
  const m = time.getMinutes();
  const s = time.getSeconds();

  const hourAngle = (h + m / 60) * 30;
  const minuteAngle = (m + s / 60) * 6;
  const secondAngle = s * 6;

  const style = `
    .clock-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-family: sans-serif;
      padding: 20px;
    }
    .clock {
      position: relative;
      width: 220px;
      height: 220px;
      border: 3px solid #000;
      border-radius: 50%;
      background: radial-gradient(circle, #fff 70%, #e6e6e6);
      margin-top: 10px;
    }
    .hand {
      position: absolute;
      left: 50%;
      bottom: 50%;
      transform-origin: bottom;
      transform: translateX(-50%) rotate(0deg);
      border-radius: 2px;
    }
    .hour { width: 4px; height: 50px; background: #000; }
    .minute { width: 3px; height: 70px; background: #333; }
    .second { width: 2px; height: 90px; background: red; }
    .center-dot {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 8px;
      height: 8px;
      background: #000;
      border-radius: 50%;
      transform: translate(-50%, -50%);
    }
    .label {
      position: absolute;
      font-weight: bold;
      color: #b30000;
    }
    .n { top: 5px; left: 50%; transform: translateX(-50%); }
    .s { bottom: 5px; left: 50%; transform: translateX(-50%); }
    .e { right: 5px; top: 50%; transform: translateY(-50%); }
    .w { left: 5px; top: 50%; transform: translateY(-50%); }
  `;

  return (
    <div className="clock-container">
      <style>{style}</style>
      <h2>Compass Clock</h2>
      <p>{time.toLocaleTimeString()}</p>
      <div className="clock">
        <div className="label n">N</div>
        <div className="label e">E</div>
        <div className="label s">S</div>
        <div className="label w">W</div>

        <div
          className="hand hour"
          style={{ transform: `translateX(-50%) rotate(${hourAngle}deg)` }}
        />
        <div
          className="hand minute"
          style={{ transform: `translateX(-50%) rotate(${minuteAngle}deg)` }}
        />
        <div
          className="hand second"
          style={{ transform: `translateX(-50%) rotate(${secondAngle}deg)` }}
        />
        <div className="center-dot" />
      </div>
    </div>
  );
}