import React, { ReactNode } from 'react';
import { Box, Button, ButtonProps, Heading } from '@wix/design-system';

export interface CustomDrawerLayoutProps {
  dataHook?: string;
  title?: ReactNode;
  children?: ReactNode;
  primaryButtonText?: ReactNode;
  secondaryButtonText?: ReactNode;
  secondaryButtonProps?: Partial<Omit<ButtonProps, 'as'>>;
  primaryButtonProps?: Partial<Omit<ButtonProps, 'as'>>;
  primaryButtonOnClick?: () => void;
  secondaryButtonOnClick?: () => void;
  removeContentPadding?: boolean;
}

export function CustomDrawerLayout(props: CustomDrawerLayoutProps) {
  const {
    dataHook,
    title,
    children,
    primaryButtonText,
    secondaryButtonText,
    secondaryButtonProps,
    primaryButtonProps,
    primaryButtonOnClick,
    secondaryButtonOnClick,
    removeContentPadding,
  } = props;

  return (
    <Box
      dataHook={dataHook}
      direction="vertical"
      padding="SP3 0"
      backgroundColor="white"
      borderRadius="12px"
    >
      {title && (
        <Box
          direction="vertical"
          padding="SP1 SP3"
          marginBottom="SP4"
          align="center"
        >
          <Heading size="small" textAlign="center">
            {title}
          </Heading>
        </Box>
      )}

      <Box
        flex={1}
        marginBottom="SP4"
        padding={removeContentPadding ? undefined : '0 SP3'}
      >
        {children}
      </Box>

      <Box direction="vertical" gap="SP4" padding="0 SP3">
        {primaryButtonText && (
          <Button
            dataHook="baseModalLayout-primary-button"
            fullWidth
            priority="primary"
            onClick={primaryButtonOnClick}
            {...(primaryButtonProps as ButtonProps)}
          >
            {primaryButtonText}
          </Button>
        )}

        {secondaryButtonText && (
          <Button
            dataHook="baseModalLayout-secondary-button"
            fullWidth
            onClick={secondaryButtonOnClick}
            priority="secondary"
            {...(secondaryButtonProps as ButtonProps)}
          >
            {secondaryButtonText}
          </Button>
        )}
      </Box>
    </Box>
  );
}