import Image from 'next/image'

type Skills = {
  text: string
  icon: string
}

const Card = () => {
  const skills = [
    {
      text: 'NextJS',
      icon: '/skills/nextjs.svg'
    },
    {
      text: 'Elixir',
      icon: '/skills/elixir.svg'
    },
    {
      text: 'Git',
      icon: '/skills/git.svg'
    },
    {
      text: 'UI/UX',
      icon: '/skills/ui.svg'
    },
    {
      text: 'Figma',
      icon: '/skills/figma.svg'
    }
  ] as Skills[]

  return (
    <div className='p-4 bg-white rounded-xl border border-[#e4e8e9] shadow-lg w-[400px]'>
      <div className='flex gap-4 items-start'>
        <Image
          src='/dog-avatar.svg'
          height={60}
          width={60}
          alt='avatar'
          className='rounded-full'
        />
        <div className='flex flex-col gap-0.5'>
          <p className='text-xl text-[#393939] font-semibold'>
            John Red Lapida
          </p>
          <p className='text-[#7D8D93]'>Web Developer</p>
          <div className='flex flex-wrap gap-1 mt-1'>
            {skills.map((skill) => (
              <div
                key={skill.text}
                className='flex gap-1 items-center bg-[#F4F6F7] border border-[#E4E8E9] rounded-lg w-max py-1 px-2'
              >
                <Image
                  src={skill.icon}
                  height={12}
                  width={12}
                  alt={skill.text}
                />
                <p className='text-xs font-semibold text-[#1A1D1F]'>
                  {skill.text}
                </p>
              </div>
            ))}
          </div>
        </div>
      </div>
      <div className='p-4 bg-[#F4F6F7] rounded-xl mt-4'>
        <p className='text-[#546166] font-semibold pb-2'>About Me</p>
        <p className='text-xs font-medium text-[#1A1D1F]'>
          I&apos;m a Front-end Developer specializing in crafting visually
          appealing and user friendly interfaces with HTML, CSS & Javascript. I
          focus on responsive design and seamless user experiences across
          devices.
        </p>
      </div>
    </div>
  )
}

export default Card