import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import React from "react";

type Props = {
  onCancel?: () => void;
  onNext?: () => void;
  onBack?: () => void;
  nextLabel?: string;
};

const cancelClass =
  "rounded-md bg-[#EF6C00] px-8 text-white hover:bg-[#EF6C00]/90 focus-visible:ring-[#EF6C00]";
const primaryClass =
  "rounded-md bg-[#074473] px-8 text-white hover:bg-[#074473]/90 focus-visible:ring-[#074473]";

const BlockAddConnectedAccounts = ({ onCancel, onNext, onBack, nextLabel }: Props) => {
  return (
    <div className="grid w-full max-w-full gap-5 md:grid-cols-2">
            <div className='space-y-2'>
                <Label>Enter Email Address</Label>
                <Input placeholder='' />
            </div>
            <div className='space-y-2'>
                <Label>Enter Slack ID</Label>
                <Input placeholder='' />
            </div>
            <div className='space-y-2'>
                <Label>Enter Skype ID</Label>
                <Input placeholder='' />
            </div>
            <div className='space-y-2'>
                <Label>Enter Portfolio Link</Label>
                <Input placeholder='' />
            </div>

      <div className="flex flex-col flex-wrap justify-end gap-4 md:col-span-2 md:flex-row">
        <Button type="button" variant="secondary" className={cancelClass} onClick={onCancel}>
          Cancel
        </Button>
        {onBack ? (
          <Button type="button" variant="outline" className="min-w-[100px]" onClick={onBack}>
            Previous
          </Button>
        ) : null}
        <Button type="button" className={primaryClass} onClick={onNext}>
          {nextLabel ?? "Next"}
        </Button>
      </div>
    </div>
  );
};

export default BlockAddConnectedAccounts;