import { Cpu, Heart } from "lucide-react";

import { Space } from "@/utils/types";

export const SpaceHeader = ({ space }: { space: Space }) => {
  return (
    <figure className="relative z-[1] h-[150px] lg:h-[200px] px-6 py-4 mb-4">
      <div
        className={`bg-gradient-to-br ${space.colorFrom} ${space.colorTo} absolute w-full top-0 left-0 h-full rounded-2xl -z-[1]`}
      />
      <div
        className={`bg-gradient-to-br ${space.colorFrom} ${space.colorTo} -z-[1] blur-3xl lg:blur-[160px] opacity-50 h-full w-full absolute top-0 left-0`}
      />
      <div className="flex items-center justify-between w-full relative">
        <div className="bg-white/15 border border-white/20 text-white px-1.5 py-0.5 rounded-md flex items-center justify-center gap-1 font-serif text-xs">
          <Cpu size={14} />
          {space.runtime.hardware.current ?? "unknown"}
        </div>
        <p className="flex items-center justify-end gap-1 text-sm text-white">
          <Heart size={14} />
          {space.likes}
        </p>
      </div>
      <p className="absolute top-0 left-0 h-full w-full flex items-center justify-center opacity-90 text-5xl lg:text-7xl text-center whitespace-nowrap truncate">
        {space.emoji}
      </p>
    </figure>
  );
};