import 'twin.macro';

import React, { FC } from 'react';

export interface IAdvisorCardProps {
  imageSrc: string;
  fullName: string;
  designatory: string;
  credentials: React.ReactNode;
  className?: string;
}

export const AdvisorCard: FC<IAdvisorCardProps> = ({
  imageSrc,
  fullName,
  designatory,
  credentials,
  className,
  ...restProps
}) => {
  return (
    <div
      title="AdvisorCard"
      className={className}
      tw="flex flex-col items-center bg-white rounded-md shadow-lg w-[175px] py-6 px-[12.5px] md:(w-[340px] py-9 px-12)"
      {...restProps}
    >
      <div tw="w-[120px] h-[120px] md:(w-[184px] h-[184px])">
        <img
          tw="bg-indigo-300 object-contain rounded-full w-full h-full"
          src={imageSrc}
          alt="photo"
        />
      </div>
      <h5 tw="font-bold leading-6 mt-1.5 md:(text-[22px] leading-9 mt-3)">
        {fullName}
      </h5>
      <h5 tw="leading-6 mb-1.5 md:(text-[22px] leading-9 mb-3)">
        {designatory}
      </h5>
      <div tw="text-brand text-center md:(text-[22px] leading-9 mb-3)">
        {credentials}
      </div>
    </div>
  );
};