Masthead

import {
  Masthead,
  MastheadHeader,
  MastheadContent,
  MastheadOfficialIndicator,
  MastheadToggle,
  MastheadSection,
  MastheadSectionTitle,
  MastheadSectionBody,
} from "@govtechmy/myds-react/masthead";
import { GovMyIcon, Lock2Icon, LockFillIcon } from "@govtechmy/myds-react/icon";

export default () => (
  <Masthead>
    <MastheadHeader>
      <MastheadOfficialIndicator>
        Official Malaysia Government Website
      </MastheadOfficialIndicator>
      <MastheadToggle>Here's how you know</MastheadToggle>
    </MastheadHeader>
    <MastheadContent>
      <MastheadSection icon={<GovMyIcon />}>
        <MastheadSectionTitle>
          Official government websites end with .gov.my
        </MastheadSectionTitle>
        <MastheadSectionBody>
          If the link does not end with
          <span className="font-semibold"> .gov.my</span>, exit the website
          immediately even if it looks similar.
        </MastheadSectionBody>
      </MastheadSection>
      <MastheadSection icon={<Lock2Icon height={24} width={24} />}>
        <MastheadSectionTitle>Secure websites use HTTPS</MastheadSectionTitle>
        <MastheadSectionBody>
          Look for a lock (
          <SolidLockIcon className="mb-0.5 inline size-3.5" />) atau
          <span className="font-semibold"> https:// </span>
          as an added precaution. If not present, do not share any sensitive
          information.
        </MastheadSectionBody>
      </MastheadSection>
    </MastheadContent>
  </Masthead>
);