'use client';

import { Drawer } from '@/components';
import IconFont from '@/components/ui/iconFont';
import { useState } from 'react';

export default function Avatar() {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <div className="h-9 w-9 cursor-pointer overflow-hidden rounded-full">
      <img
        onClick={() => setIsOpen(true)}
        src="/avator.png"
        width={36}
        height={36}
        alt="avatar"
      />
      <Drawer
        onClose={() => setIsOpen(false)}
        mask
        width={450}
        inBody
        open={isOpen}
      >
        <div className="h-full w-full bg-[rgba(26,23,34,1)] px-10 pt-7">
          <div className="flex justify-between">
            <span onClick={() => setIsOpen(false)}>
              <IconFont
                className="cursor-pointer"
                type="icon-fanhui"
                size={18}
              />
            </span>
          </div>
        </div>
      </Drawer>
    </div>
  );
}
