import React from 'react';

interface GoogleReviewsBrandingProps {
    centered?: boolean;
}

const GoogleReviewsBranding: React.FC<GoogleReviewsBrandingProps> = ({ centered = false }) => {
    return (
        <div className="google-reviews-branding" style={{
            marginTop: '15px',
            display: 'flex',
            flexDirection: 'column',
            alignItems: centered ? 'center' : 'flex-start',
            gap: '0px'
        }}>
            <div style={{
                fontSize: '35px',
                fontWeight: '700',
                lineHeight: '1.2',
                letterSpacing: '3px',
                fontFamily: '"Product Sans", "Google Sans", Roboto, Arial, sans-serif',
                display: 'flex',
                alignItems: 'center'
            }}>
                <span style={{ color: '#4285F4' }}>G</span>
                <span style={{ color: '#EA4335' }}>o</span>
                <span style={{ color: '#FBBC04' }}>o</span>
                <span style={{ color: '#4285F4' }}>g</span>
                <span style={{ color: '#34A853' }}>l</span>
                <span style={{ color: '#EA4335' }}>e</span>
            </div>
            <div style={{
                fontSize: '16px',
                fontWeight: '700',
                lineHeight: '1.2',
                fontFamily: '"Product Sans", "Google Sans", Roboto, Arial, sans-serif',
                display: 'flex',
                alignItems: 'center',
                gap: '5px',
                marginTop: '-2px'
            }}>
                <span style={{ color: '#FFFFFF' }}>Reviews</span>
                <div style={{
                    display: 'flex',
                    gap: '1px',
                    fontSize: '16px',
                    lineHeight: '1'
                }}>
                    <span style={{ color: '#FBBC04' }}>★</span>
                    <span style={{ color: '#FBBC04' }}>★</span>
                    <span style={{ color: '#FBBC04' }}>★</span>
                    <span style={{ color: '#FBBC04' }}>★</span>
                    <span style={{ color: '#FBBC04' }}>★</span>
                </div>
            </div>
        </div>
    );
};

export default GoogleReviewsBranding;