"use client"
import { useEffect } from "react"

import { Button } from "@scandic-hotels/design-system/Button"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"

import useSidePeekStore, { type SidePeekEnum } from "../../stores/sidepeek"
import { useTrackingContext } from "../../trackingContext"

interface OpenSidePeekButtonProps {
  label: string
  hotelId: string
  showCTA: boolean
  sidePeekKey: SidePeekEnum
}

export default function OpenSidePeekButton({
  label,
  hotelId,
  showCTA,
  sidePeekKey,
}: OpenSidePeekButtonProps) {
  const tracking = useTrackingContext()
  const { openSidePeek, closeSidePeek } = useSidePeekStore((state) => ({
    openSidePeek: state.openSidePeek,
    closeSidePeek: state.closeSidePeek,
  }))

  useEffect(() => {
    return () => {
      closeSidePeek()
    }
  }, [closeSidePeek])

  return (
    <Button
      onPress={() => {
        openSidePeek({ key: sidePeekKey, hotelId, showCTA })
        tracking.trackOpenSidePeek({
          name: sidePeekKey,
          hotelId,
          includePathname: true,
        })
      }}
      variant="Text"
      typography="Body/Paragraph/mdBold"
    >
      {label}
      <MaterialIcon icon="chevron_right" size={24} color="CurrentColor" />
    </Button>
  )
}