function Darkfire(props){
  const {
    details = {
      fullName: "Harsha Sri Sameera",
      age: "20",
      education: "Bachelor of Science in Computer Science Engineering"
    },
    skills = [
      "React",
      "TypeScript",  
      "JavaScript",
      "BootStrap",
      "Lua",
      "Git",
      "HTML & CSS",
      "C++",
      "Python",
      "Go",
      "Java",
      "BashScripting"
    ],
    work = {
      company: "Anubudh EdTech",  
      position: "Full Stack Developer"
    },
    goals = [
      "build something cool and useful",
      "to live an adventurous life"
    ], 
    flaw = [
      "Stubborn heart"
    ]
    location = {
      city: "Kakinada",
      country: "India"
    }
    sports = {
      martialArts: "Taekwondo",
      indoor: "Rubick's Cubes"
    }
  } = props;
  
  const {t} = useTranslation();

  return (
    <article className="flex bg-white dark:bg-black text-black dark:text-white rounded p-4 md:p-2 shadow-sm">
      <Avataram />
      <div className="grid gap-2">
        <h1 className="text-lg space-x-2">
          <span>{details.fullName}</span> 
          <span className="text-sm text-gray">{details.age}</span>
        </h1>
        <h4 className="text-md">{details.education}</h4>
	
        <div className="px-4 py-2 border">
          <p>{t('common.work')}: {work.company} as {work.position}</p> 
          <p>{t('common.location')}: {location.city}, {location.country}</p>
	      </div>
	
        <ul className="flex flex-wrap items-center gap-2">
          {skills.map((skill) => (
            <li key={skill} className="p-2 rounded bg-indigo-500 text-white cursor-pointer select-none">
              {skill}
            </li>
          ))}
        </ul>
      </div>
    </article>
  );
};

export default Darkfire;