"use client";

import { Col, Row } from 'antd'
import classNames from 'classnames'
import * as React from 'react'
import { useCallback, useEffect, useState } from 'react'
import { Paragraph } from '@/components/Typography/Paragraph'

import '../css/FanClubCard.scss'

interface FanClubCardProps {
  title?: string
  subTitle?: string
  image?: string
  onSaveFanClub?: (data: any) => void
}

const FanClubCard = ({
  title,
  subTitle,
  image,
  onSaveFanClub
}: FanClubCardProps) => {
  const [photo, setPhoto] = useState<MediaUpload>({})

  useEffect(() => {
    setPhoto({ url: image })
  }, [])
  const uploadPhotoSuccess = useCallback(
    (file: MediaUpload) => {
      setPhoto(file)
      const data = {
        order: 0,
        thumbnail: file.url
      }
      onSaveFanClub?.(data)
    },
    [onSaveFanClub]
  )
  const removePhoto = useCallback(() => {
    setPhoto({})
    const data = {
      order: 0,
      thumbnail: ''
    }
    onSaveFanClub?.(data)
  }, [onSaveFanClub])
  return (
    <div className="fan-club-card">
      <Row align="middle">
        <Col flex={'1'}>
          <Paragraph
            preset={'bold32'}
            className={classNames(
              'fan-club-card__title m__b--8',
              'leading-42'
            )}
          >
            {title}
          </Paragraph>
          <Paragraph
            className="m__b--8 opacity--80 fan-club-card__title"
            preset={'regular18'}
          >
            {subTitle}
          </Paragraph>
        </Col>
        <Col>
            <p>HELLO</p>
        </Col>
      </Row>
    </div>
  )
}

export default FanClubCard