insted of click , iwant details to be displayed on hover 

// src/components/AchievementsTimeline.js

import React, { useEffect, useState } from 'react';
import { useStaticQuery, graphql } from 'gatsby';
import styled from 'styled-components';
import { srConfig } from '@config';
import sr from '@utils/sr';
import { usePrefersReducedMotion } from '@hooks';

// Styled Components

const StyledAchievementsSection = styled.section`
  max-width: 900px;
  margin: 0 auto;
  padding: 4rem 0;

  .heading {
    text-align: center;
    margin-bottom: 3rem;
    font-size: 2.5rem;
    position: relative;

    &::after {
      content: '';
      width: 60px;
      height: 4px;
      background: var(--green);
      display: block;
      margin: 0.75rem auto 0;
      border-radius: 2px;
    }
  }
`;

const Timeline = styled.ol`
  position: relative;
  padding: 0;
  list-style: none;

  &::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--lightest-navy);
    transform: translateX(-50%);
  }

  @media (max-width: 768px) {
    &::before {
      left: 20px;
      transform: none;
    }
  }
`;

const TimelineItem = styled.li`
  position: relative;
  width: 50%;
  padding: 1rem 2rem;
  box-sizing: border-box;
  cursor: pointer;
  transition: background 0.3s ease;

  &:nth-child(odd) {
    left: 0;
    text-align: right;
  }

  &:nth-child(even) {
    left: 50%;
    text-align: left;
  }

  &:nth-child(odd)::before {
    content: '';
    position: absolute;
    top: 1.5rem;
    right: -8px;
    width: 16px;
    height: 16px;
    background: var(--green);
    border: 4px solid var(--lightest-navy);
    border-radius: 50%;
    z-index: 1;
  }

  &:nth-child(even)::before {
    content: '';
    position: absolute;
    top: 1.5rem;
    left: -8px;
    width: 16px;
    height: 16px;
    background: var(--green);
    border: 4px solid var(--lightest-navy);
    border-radius: 50%;
    z-index: 1;
  }

  .content {
    background: var(--lightest-navy);
    padding: 1.5rem;
    border-radius: var(--border-radius);
    position: relative;
    transition: background 0.3s ease;

    &:hover {
      background: var(--navy);
    }

    &.expanded {
      background: var(--navy);
    }
  }

  .title {
    font-size: var(--fz-lg);
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--green);
  }

  .company {
    font-size: var(--fz-md);
    color: var(--slate);
    margin-bottom: 0.5rem;
  }

  .range {
    font-size: var(--fz-sm);
    color: var(--light-slate);
    margin-bottom: 0.5rem;
  }

  .location {
    font-size: var(--fz-sm);
    color: var(--light-slate);
  }

  .description {
    margin-top: 1rem;
    font-size: var(--fz-sm);
    color: var(--light-slate);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  &.expanded .description {
    max-height: 500px; /* Adjust as needed */
  }

  @media (max-width: 768px) {
    width: 100%;
    left: 0;
    text-align: left;
    padding-left: 3rem;
    margin-bottom: 2rem;
    cursor: default;

    &:nth-child(odd),
    &:nth-child(even) {
      left: 0;
    }

    &:nth-child(odd)::before,
    &:nth-child(even)::before {
      left: 12px;
    }
  }
`;

const AchievementsTimeline = () => {
  const data = useStaticQuery(graphql`
    query {
      achievements: allMarkdownRemark(
        filter: { fileAbsolutePath: { regex: "/content/Volunteer/" } }
        sort: { fields: [frontmatter___date], order: DESC }
      ) {
        edges {
          node {
            frontmatter {
              title
              company
              location
              range
              url
            }
            html
          }
        }
      }
    }
  `);

  const achievementsData = data.achievements.edges;

  const prefersReducedMotion = usePrefersReducedMotion();

  // State to track which items are expanded
  const [expandedIndex, setExpandedIndex] = useState(null);

  useEffect(() => {
    if (prefersReducedMotion) {
      return;
    }

    sr.reveal('.timeline-item', srConfig());
  }, []);

  // Handler to toggle expand/collapse
  const toggleExpand = (index) => {
    if (expandedIndex === index) {
      setExpandedIndex(null); // Collapse if already expanded
    } else {
      setExpandedIndex(index); // Expand the clicked item
    }
  };

  return (
    <StyledAchievementsSection id="achievements">
      <h2 className="heading">Achievements</h2>
      <Timeline>
        {achievementsData.map(({ node }, index) => {
          const { title, company, location, range, url } = node.frontmatter;
          const isExpanded = expandedIndex === index;

          return (
            <TimelineItem
              key={index}
              className={`timeline-item ${isExpanded ? 'expanded' : ''}`}
              onClick={() => toggleExpand(index)}
              role="button"
              tabIndex={0}
              onKeyPress={(e) => {
                if (e.key === 'Enter' || e.key === ' ') {
                  toggleExpand(index);
                }
              }}
              aria-expanded={isExpanded}
              aria-controls={`achievement-details-${index}`}
            >
              <div className={`content ${isExpanded ? 'expanded' : ''}`}>
                <h3 className="title">
                  {title} @{' '}
                  <a href={url} className="inline-link">
                    {company}
                  </a>
                </h3>
                <p className="range">{range}</p>
                <p className="location">{location}</p>
                <div
                  id={`achievement-details-${index}`}
                  className="description"
                  dangerouslySetInnerHTML={{ __html: node.html }}
                />
              </div>
            </TimelineItem>
          );
        })}
      </Timeline>
    </StyledAchievementsSection>
  );
};

export default AchievementsTimeline;