import { useTranslation } from 'react-i18next';
import { LogoHexa } from '../../Atoms/LogoHexa/LogoHexa';
import { Typography } from '../../Atoms/Typography/Typography';
import { FONT_FAMILY_SANS } from '../../../designTokens';

export const TituloPoint = ({
  backgroundColor = 'var(--color-main)',
  textColor = '#FFFFFF',
  borderBottomColor = 'var(--color-main-800)',
  className = '',
  ...props
}) => {
  const { t } = useTranslation();

  return (
    <div
      className={`titulo-point ${className}`}
      style={{
        backgroundColor: backgroundColor,
        width: '100%',
        display: 'none',
        opacity: 1,
        borderBottomColor: borderBottomColor
      }}
      {...props}
    >
      <style>{`
        @media (min-width: 769px) {
          .titulo-point {
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: 100%;
            height: calc(60px * (100vw / 1440px));
            min-height: 40px;
            max-height: 60px;
            padding-top: 20px;
            padding-right: 16px;
            padding-left: 16px;
            padding-bottom: 0;
            border-bottom-width: 1px;
            border-bottom-style: solid;
            box-sizing: border-box;
            position: relative;
          }
          .titulo-point-inner {
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 12px;
            width: 100%;
            margin: 0 auto;
            padding: 0;
            flex-shrink: 0;
          }
        }
        @media (min-width: 1440px) {
          .titulo-point {
            height: 60px;
          }
        }
        @media (max-width: 768px) {
          .titulo-point {
            display: none !important;
          }
        }
      `}</style>
      <div className="titulo-point-inner" style={{ margin: 0, padding: 0 }}>
        <LogoHexa 
          width={28} 
          height={32}
          backgroundColor="#FFFFFF"
          textColor="var(--color-main)"
        />
        <Typography
          variant="h5"
          style={{
            color: textColor,
            fontFamily: FONT_FAMILY_SANS,
            fontWeight: 600,
            fontSize: '18px',
            lineHeight: '1.2',
            margin: 0,
            padding: 0,
            display: 'flex',
            alignItems: 'center'
          }}
        >
          {t('point.titulo.brand')}
        </Typography>
      </div>
    </div>
  );
};

export default TituloPoint;
