import React, { ComponentPropsWithoutRef, FC } from 'react';
import Image from 'next/image';
import { cva } from 'class-variance-authority';
import { CompanyProps } from '../../types';
import { cssMerge } from '../../utils/cssMerge';

interface SwitcherLogoBarProps extends ComponentPropsWithoutRef<'div'> {
  companies: CompanyProps[];
}

const wrapper = cva([
  'tw-flex',
  'tw-items-center',
  'tw-gap-8',
  'tw-justify-between',
  'tw-overflow-scroll',
  'tw-no-scrollbar',
  '-tw-mr-6',
  'lg:tw-mr-0',
]);

const scrollGradient = cva([
  'after:tw-h-full',
  'after:tw-w-20',
  'after:tw-bg-gradient-scroll',
  'after:tw-absolute',
  'after:tw-right-0',
  'lg:after:tw-invisible',
]);

export const SwitcherLogoBar: FC<SwitcherLogoBarProps> = ({ companies, className }) => {
  return (
    <div className="tw-relative -tw-mr-6 lg:tw-mr-0">
      <div className={cssMerge(wrapper(), scrollGradient(), className)}>
        {companies.map(
          company =>
            company.logo && (
              <Image
                src={company.logo.src || ''}
                alt={company.logo.alt || company.name || ''}
                width={100}
                height={24}
                className="tw-w-auto tw-brightness-0 tw-invert"
              />
            )
        )}
      </div>
    </div>
  );
};
