'use client'

import { useGetMemberDetail } from '@/hooks/useWallet'
import dayjs from 'dayjs'

interface SubscribeTextProps {
  enableQuery?: boolean
}

const SubscribeText = ({ enableQuery = true }: SubscribeTextProps) => {
  const { data: memberDetail } = useGetMemberDetail({ enabled: enableQuery })
  const { userMemberInfo } = memberDetail || {}

  const { expTime } = userMemberInfo || {}

  if (!userMemberInfo || (expTime && new Date(expTime) < new Date())) {
    return (
      <div className="flex flex-col items-center gap-1 text-center sm:flex-row sm:text-left">
        <span className="txt-body-m sm:txt-body-l text-white">Unlock more with just</span>
        <span className="txt-title-s sm:txt-title-m text-white">$5.99/month</span>
      </div>
    )
  }

  return (
    <div className="txt-title-s text-txt-primary-normal text-center">
      {`Expiration Date: ${dayjs(expTime).format('MMM DD, YYYY, HH:mm A')}`}
    </div>
  )
}

export default SubscribeText
