export default function Skill({ label, color }) {

  switch (color) {
    case "blue-500":
      return <TypescriptSkill {...{ label }} />
    case "green-800":
      return <PythonSkill {...{ label }} />

    case "yellow-800":
      return <RustSkill {...{ label }} />

    case "yellow-500":
      return <JavascriptSkill {...{ label }} />

    default:
      return null
  }
}

function TypescriptSkill({ label }) {
  return <div className={`bg-blue-500 text-white rounded-xl px-2 py-1 text-xs`}>{label}</div>
}
function JavascriptSkill({ label }) {
  return <div className={`bg-yellow-500 text-white rounded-xl px-2 py-1 text-xs`}>{label}</div>
}
function PythonSkill({ label }) {
  return <div className={`bg-green-800 text-white rounded-xl px-2 py-1 text-xs`}>{label}</div>
}
function RustSkill({ label }) {
  return <div className={`bg-yellow-800 text-white rounded-xl px-2 py-1 text-xs`}>{label}</div>
}