import { Avatar } from 'antd';
import Title from 'antd/es/typography/Title';

interface HeaderProps {
  title: string;
  additionalContent?: React.ReactNode;
}

export default function Header({ title, additionalContent }: HeaderProps) {
  return (
    <div
      style={{
        height: '72px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
      }}
    >
      <Title style={{ marginLeft: '16px' }} level={3}>
        {title}
      </Title>
      <div
        style={{
          display: 'flex',
          alignItems: 'center',
          gap: '24px',
          marginRight: '26px',
        }}
      >
        {additionalContent}
        <img
          src="./icons/header/more.svg"
          alt="more"
          style={{ height: '16px', width: '16px' }}
        />
        <div
          style={{
            borderRadius: '50%',
            border: '2px solid #8BC34A',
            height: '32px',
            width: '32px',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
          }}
        >
          <Avatar
            size={25.77}
            src={`https://cdn-icons-png.flaticon.com/512/219/219986.png`}
          />
        </div>
      </div>
    </div>
  );
}
