import { cn } from "../../../../@/lib/utils";
import React from "react";
import { Button } from "../../atoms";
import { EditIcon, PlusIcon } from "../../../icons";

export type ProfileSectionHeaderProps = {
  containerClassName?: string;
  titleClassName?: string;
  title?: string;
  children?: React.ReactNode;
  onPressEdit?: () => void;
  isEditMode?: boolean;
  showAddButton?: boolean;
  showEditButton?: boolean;
  onPressAddButton?: () => void;
  onPressCancel?: () => void;
  onPressSave?: () => void;
};

const ProfileSectionHeader = ({
  containerClassName = "",
  titleClassName = "",
  title,
  children,
  onPressEdit,
  onPressCancel,
  onPressSave,
  isEditMode,
  showAddButton,
  showEditButton,
  onPressAddButton,
}: ProfileSectionHeaderProps) => {
  return (
    <div
      className={cn(
        "flex items-center flex-wrap gap-2 justify-between self-stretch",
        containerClassName
      )}
    >
      {children || (
        <h4
          className={cn("text-xl font-semibold text-gray-900", titleClassName)}
        >
          {title}
        </h4>
      )}
      {isEditMode ? (
        <div className="flex items-center gap-1.5">
          <Button
            size="sm"
            variant="primary-tertiary"
            title="Cancel"
            onClick={onPressCancel}
          >
            Cancel
          </Button>
          <Button
            size="sm"
            variant="primary"
            title="Save changes"
            onClick={onPressSave}
          >
            Save changes
          </Button>
        </div>
      ) : (
        <div className="flex items-center gap-1.5">
          {showAddButton && (
            <Button
              size="sm"
              variant="primary"
              leftIcon={<PlusIcon />}
              onClick={onPressAddButton}
            >
              Add
            </Button>
          )}
          {showEditButton && (
            <Button
              size="sm"
              variant="gray-outline"
              leftIcon={<EditIcon />}
              title="Edit"
              onClick={onPressEdit}
            >
              Edit
            </Button>
          )}
        </div>
      )}
    </div>
  );
};

export { ProfileSectionHeader };
