"use client";
import React, { useState } from 'react';
import { S } from '../typography';
import { MiniArrowSVG } from '@/assets/svg';
import { CustomCard } from '../cards';
import { useTranslations } from 'next-intl';

const CalendarTimline = ({ events }: { events: { titles: string[], times: string[] } }) => {
    const t = useTranslations()
    const [cursorPosition, setCursorPosition] = useState<{ x: number | null; y: number | null }>({ x: null, y: null, });
    const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
        const rect = e.currentTarget.getBoundingClientRect();
        setCursorPosition({
            x: e.clientX - rect.left,
            y: e.clientY - rect.top,
        });
    };

    const handleMouseLeave = () => {
        setCursorPosition({ x: null, y: null });
    };
    const style1 = "translate-y-[50px] px-4 p-2 flex flex-col bg-transparent hover:bg-[#e7e7e7] duration-200 h-[50px] w-[100%] cursor-pointer"
    return (
        <CustomCard className='!p-0 hover:shadow-black/20 duration-200 shadow-lg'>
            {/* Time labels */}
            <div className='h-[50px] grid grid-cols-4 border-b border-gray-200'>

                {events?.times.map((time, i) => (
                    <S key={i} className='h-full flex justify-center items-center text-center max-sm:text-[12px]'>{time}</S>
                ))}

            </div>
            <div
                className='h-[200px] relative'
                onMouseMove={handleMouseMove}
                onMouseLeave={handleMouseLeave}
            >
                <div className={`${cursorPosition.x !== null ? "opacity-100 duration-0 " : "opacity-0 duration-500"}   block`}>
                    <div className={`absolute h-full z-10 w-[2px] bg-destructive pointer-events-none   `} style={{ left: `${cursorPosition.x}px` }}></div>
                    <div className={`absolute top-[-54px]  z-10 pointer-events-none`} style={{ left: `${cursorPosition.x}px` }}> <MiniArrowSVG className={"w-4 h-4 -translate-x-2 text-destructive"} /></div>
                </div>
                <div className="absolute h-[250px] inset-0 grid grid-cols-4 translate-y-[-50px] ">
                    <div className="border-r border-gray-200">
                        <div className={style1}></div>
                        <div className=" translate-y-[50px] px-4 p-2 flex flex-col hover:shadow-xl hover:bg-primary hover:text-white hover:scale-[1.02]  bg-[#e7f3fd] duration-200 h-[50px] w-[202%] text-primary cursor-pointer"><S>{events.titles[0]}</S> <S className='!text-[12px] max-sm:!text-[9px] leading-3 !font-normal'>{t("Jul")} 11 2024 8:00am  - Sep 20 2024 10:00pm</S> </div>
                        <div className={style1}></div>
                        <div className={style1}></div>
                    </div>
                    <div className="border-r border-gray-200">
                        <div className={style1}></div>
                        <div className={style1}></div>
                        <div className=" translate-y-[50px] translate-x-[15%] px-4 p-2 flex flex-col hover:shadow-xl hover:bg-primary hover:text-white hover:scale-[1.02]  bg-[#e7f3fd] duration-200 h-[50px] w-[262%] text-primary cursor-pointer"><S>{events.titles[1]}</S> <S className='!text-[12px] max-sm:!text-[9px] leading-3 !font-normal'>{t("Jul")} 11 2024 9:30am  - Sep 20 2024 5:00pm</S> </div>
                        <div className={style1}></div>
                    </div>
                    <div className="border-r border-gray-200">
                        <div className={style1}></div>
                        <div className={style1}></div>
                        <div className={style1}></div>
                        <div className={style1}></div>
                    </div>
                    <div className="border-r border-gray-200">
                        <div className={style1}></div>
                        <div className={style1}></div>
                        <div className={style1}></div>
                        <div className={style1}></div>
                    </div>
                </div>
            </div>
        </CustomCard>
    );
};

export default CalendarTimline;