import Flex from '@/components/atoms/Flex/Flex.component'
import Heading from '@/components/atoms/Heading'
import { ITestimonialsCard } from './TestimonialsCard.interface'
import ImageWrapper from '@/components/atoms/ImageWrapper/ImageWrapper.component'
import React from 'react'
import { ReactSVG } from 'react-svg'
import RichText from '@/components/atoms/RichText/RichText.component'
import { StyledTestimonialsCard } from './TestimonialsCard.theme'

const TestimonialsCard = ({
  variation,
  description,
  logo,
  label,
  flag,
  person_img,
  person_name,
  person_role,
  className,
  style,
  ...props
}: ITestimonialsCard) => {
  return (
    <StyledTestimonialsCard className={className} style={style}>
      <Flex align="center" wrap="nowrap" className="w-100 mb-3">
        {(person_img || logo) && (
          <div className="flex-grow-1">
            {variation === 'team' ? (
              <Flex align="center" wrap="nowrap">
                {person_img && (
                  <div
                    className="flex-shrink-1 me-3"
                    style={{
                      width: '4rem',
                      borderRadius: '500px',
                      overflow: 'hidden'
                    }}
                  >
                    <ImageWrapper aspectRatioHeight={100}>
                      {person_img}
                    </ImageWrapper>
                  </div>
                )}
                <div className="flex-grow-1">
                  {person_name && (
                    <Heading
                      tag="span"
                      size="texts"
                      className="color-primary70 fw-semibold"
                    >
                      {person_name}
                    </Heading>
                  )}
                  {person_role && (
                    <Heading tag="span" size="texts" className="color-gray90">
                      {person_role}
                    </Heading>
                  )}
                </div>
              </Flex>
            ) : (
              <>
                {logo && (
                  <div
                    style={{
                      maxWidth: '10rem'
                    }}
                  >
                    <ImageWrapper aspectRatioHeight={18}>{logo}</ImageWrapper>
                  </div>
                )}
              </>
            )}
          </div>
        )}
        <div className="flex-shrink-1">
          <ReactSVG src={`/assets/components/quotes.svg`} />
        </div>
      </Flex>

      {description && (
        <RichText tag="p" className="color-gray70">
          {description}
        </RichText>
      )}

      {variation === 'customer' && (
        <Flex align="flex-end" wrap="nowrap" className="w-100 h-100 mt-4">
          {flag && (
            <div
              className="flex-shrink-1 me-3"
              style={{
                width: '20px',
                borderRadius: '50px',
                overflow: 'hidden'
              }}
            >
              <ImageWrapper aspectRatioHeight={100}>{flag}</ImageWrapper>
            </div>
          )}
          {label && (
            <div className="flex-grow-1">
              <Heading tag="span" size="texts" className="color-gray50">
                {label}
              </Heading>
            </div>
          )}
        </Flex>
      )}
    </StyledTestimonialsCard>
  )
}

export default TestimonialsCard