import { Button, Flex, Stack, Text } from "@mantine/core";
import { IconTrash } from "@tabler/icons-react";
import type React from "react";

const StepContentWrapper: React.FC<{
  children: React.ReactNode;
  title: string;
  onClearClick: () => void;
}> = ({ children, title, onClearClick }) => {
  return (
    <Flex
      direction={"column"}
      gap={20}
      mt={15}
      pt={20}
      mx={10}
      px={3}
      style={{
        borderTop: "1px solid var(--mantine-color-white-1)",
        height: "100%",
      }}
    >
      <Flex justify={"space-between"}>
        <Text fz={18} fw={600}>
          {title}
        </Text>
        <Button
          variant="transparent"
          px={0}
          py={0}
          leftSection={
            <IconTrash width={13} height={13} style={{ marginRight: "-5px" }} />
          }
          td={"underline"}
          onClick={onClearClick}
        >
          Clear Fields
        </Button>
      </Flex>
      <Stack
        justify="space-between"
        style={{
          flex: 1,
          minHeight: "calc(100vh - 300px)",
        }}
      >
        {children}
      </Stack>
    </Flex>
  );
};

export default StepContentWrapper;