import React, { FC } from 'react';
import Image from 'next/image';
import { cva } from 'class-variance-authority';
import { CompanyProps, ImageProps } from '../../types';
import { Button, ButtonProps } from '../../molecules/Button';

export interface SwitcherCardProps {
  category?: string;
  image?: ImageProps;
  eyebrow?: string;
  featuredCompany?: CompanyProps;
  description?: string;
  button?: ButtonProps;
  companies?: CompanyProps[];
}

const wrapper = cva([
  'tw-flex',
  'tw-flex-col lg:tw-flex-row-reverse lg:tw-items-center',
  'tw-rounded-lg',
  'tw-bg-gray-800',
  'lg:tw-shadow-3xl-purple',
]);
const content = cva(['tw-p-6', 'tw-grid', 'tw-gap-4', 'lg:tw-w-1/2', 'md:tw-px-10', 'md:tw-py-8']);
const imageStyles = cva([
  'tw-rounded-b-lg',
  'tw-w-full',
  'lg:tw-w-1/2',
  'lg:tw-rounded-l-lg',
  'lg:tw-rounded-r-none',
  'lg:tw-h-[456px]',
  'tw-object-cover',
]);

export const SwitcherCard: FC<SwitcherCardProps> = ({ image, eyebrow, featuredCompany, description, button }) => {
  return (
    <div className={wrapper()}>
      <div className={content()}>
        {eyebrow && <span className="eyebrow">{eyebrow}</span>}
        {featuredCompany && featuredCompany.logo && (
          <Image
            src={featuredCompany.logo.src || ''}
            alt={featuredCompany.name || ''}
            className="tw-w-1/2 tw-max-w-xs"
            width={264}
            height={80}
          />
        )}
        {description && <p className="tw-text-lg tw-text-gray-300">{description}</p>}
        {button && <Button {...button} />}
      </div>
      {image && (
        <Image src={image.src || ''} alt={image.alt || ''} width={608} height={456} className={imageStyles()} />
      )}
    </div>
  );
};
