import { useFormikContext } from "formik";
import Card from "../../../ui/Card";
import CardHeader from "../../../ui/CardHeader";
import ChannelFields from "./ChannelFields";
import type { FormTypes } from "../../../types/types";

const ChannelCard = () => {
  const { values, errors, touched } = useFormikContext<FormTypes>();

  return (
    <Card className="p-4 h-150 md:h-full">
      <CardHeader title={`Channel (${values?.format})`} />
      <ChannelFields errors={errors} touched={touched} values={values} />
      <button
        type="submit"
        className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
      >
        {"Save Changes"}
      </button>
    </Card>
  );
};

export default ChannelCard;