import '../styles/switchback.css';
import React, { ElementType, FC } from 'react';
import Image from 'next/image';
import { VariantProps, cva } from 'class-variance-authority';
import { Button, ButtonProps } from '../../../molecules/Button';
import { Section } from '../../../molecules/Section';
import { ImageProps } from '../../../types';

export interface SwitchbackProps extends VariantProps<typeof wrapper> {
  assetSide?: 'left' | 'right';
  eyebrow?: string;
  headline?: string;
  headingAs?: ElementType;
  body?: string;
  buttons?: ButtonProps[];
  image?: ImageProps;
  hideBackground?: boolean;
}

const wrapper = cva(['tw-flex', 'tw-flex-col', 'tw-gap-8', 'tw-items-center', '', 'lg:tw-justify-between'], {
  variants: {
    assetSide: {
      left: ['lg:tw-flex-row-reverse'],
      right: ['lg:tw-flex-row'],
    },
  },
});
const headlineStyles = cva(['tw-font-medium', 'tw-text-display-sm', 'md:tw-text-display-lg']);
const buttonWrapper = cva(['tw-flex', 'tw-gap-2', 'tw-flex-col', 'sm:tw-flex-row', 'md:tw-w-fit', 'tw-mt-4']);
const content = cva(['tw-flex', 'tw-flex-col', 'tw-gap-4', 'lg:tw-max-w-lg']);
const background = cva([], {
  variants: {
    hideBackground: {
      true: ['tw-bg-transparent'],
      false: ['switchback-gradient'],
    },
  },
});

export const Switchback: FC<SwitchbackProps> = ({
  assetSide = 'right',
  eyebrow,
  headline,
  body,
  buttons,
  headingAs,
  image,
  hideBackground = false,
}) => {
  const H = headingAs || 'h2';

  return (
    <Section wrapperClass={background({ hideBackground })} className={wrapper({ assetSide })}>
      <div className={content()}>
        {eyebrow && <span className="eyebrow">{eyebrow}</span>}
        {headline && <H className={headlineStyles()}>{headline}</H>}
        {body && <p className="text-body">{body}</p>}
        {buttons && (
          <div className={buttonWrapper()}>
            {buttons.map(button => (
              <Button {...button} className="tw-w-full sm:tw-w-fit" />
            ))}
          </div>
        )}
      </div>
      {image && <Image src={image.src} width={600} height={600} alt={image.alt || ''} />}
    </Section>
  );
};
