import { Col, Row } from "antd";
import { Paragraph } from "components/Typography";
import * as React from "react";

import { PodcastItem } from "models/talent/talent-profile-module.model";
import { ModalStep } from "redux/Shopify/types";
import IndividualPodcastContent from "./IndividualPodcastContent";

export interface IProps {
  show?: boolean;
  step?: number;
  setStep?: (value: number) => void;
  item?: PodcastItem;
  cancellable?: boolean;
  podcastLinks?: any[];
  setPodcastLinks?: (values: any[]) => void;
  close?: () => void;
  back?: () => void;
  callback: (values: any, action?: any) => void;
  onConnectSpotify?: () => void;
}
const individualPodcast = (props: IProps): ModalStep => {
  return {
    title: (
      <Row gutter={12} align="middle">
        <Col>
          <Paragraph preset="semibold20">
            {props.item ? "Edit Podcast" : "Add Individual Podcast"}
          </Paragraph>
        </Col>
        <Col>
          <Row
            align="middle"
            justify="center"
            className="bg--gray12 border__radius--4 p__x--8 height--24"
          >
            <Paragraph
              className="leading-22 text--tundola"
              preset="medium14"
            >{`STEP ${props.step}/2`}</Paragraph>
          </Row>
        </Col>
      </Row>
    ),
    content: <IndividualPodcastContent {...props} />,
    footer: null,
  };
};

export default individualPodcast;
