import { ArrowUpIcon, RightCarrrotIcon } from '@/public/Icon';
import { OccasionsData } from '@/utils/data';
import { useRouter } from 'next/router';
import { useState } from 'react';
import { Col, Container, Row } from 'react-bootstrap';
import style from './index.module.scss';

const Occasions = () => {

  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);

  const router = useRouter();

  const handleMouseEnter = (index: number) => {
    setHoveredIndex(index);
  };

  const handleMouseLeave = () => {
    setHoveredIndex(null);
  };

  return (
    <div className="py-6">
      <Container>
        <h2
          className={` text-capitalize heading-3  AloveraFont fw-bolder`}
        >
          A truck & movers for{' '}
          <span className="text-primary-color">any occasion</span>
        </h2>
        <Row className="gy-3 mt-3">
          {OccasionsData.map((item, index) => (
            <Col md={6} lg={4} sm={12} key={index}>
              <div
                className={`${style.occasionCard} cursor-pointer ${hoveredIndex === index ? style.active : ''}`}
                onMouseEnter={() => handleMouseEnter(index)}
                onMouseLeave={handleMouseLeave}
                onClick={() => router.push('/user/auth/storage-unit')}
              >
                <div className="d-flex gap-4 justify-content-start align-items-center">
                  <div className={style.icon}>{item?.icon}</div>
                  <h5
                    className={`mb-0 pb-0 fs-sm-5   AloveraFont`}
                  >
                    {item?.title}
                  </h5>
                </div>

                <ArrowUpIcon className={`${style.arrowUpIcon}`} />
                <RightCarrrotIcon className={`${style.RightCarrrotIcon}`} />
              </div>
            </Col>
          ))}
        </Row>
      </Container>
    </div>
  );
};

export default Occasions;