<script setup lang="ts">
import { ref } from "vue";
import { Check, Copy } from "lucide-vue-next";

const props = withDefaults(
  defineProps<{ name: string; hex: string; hsl: string; token?: string; class?: string }>(),
  { class: "" },
);

const copied = ref(false);
const copyHex = () => {
  navigator.clipboard.writeText(props.hex);
  copied.value = true;
  setTimeout(() => (copied.value = false), 1500);
};
</script>

<template>
  <div class="group cursor-pointer print:cursor-default" @click="copyHex">
    <div :class="`w-full h-20 rounded-xl mb-2 ring-1 ring-black/5 transition-transform group-hover:scale-105 print:group-hover:scale-100 ${props.class}`" :style="{ backgroundColor: hex }" />
    <p class="text-sm font-bold text-gray-900">{{ name }}</p>
    <p class="text-xs text-gray-500 font-mono flex items-center gap-1">
      {{ hex }} <Check v-if="copied" class="w-3 h-3 text-[#00C853]" /><Copy v-else class="w-3 h-3 opacity-0 group-hover:opacity-50 print:hidden" />
    </p>
    <p class="text-[10px] text-gray-400 font-mono">{{ hsl }}</p>
    <p v-if="token" class="text-[10px] text-[#00C853] font-mono mt-0.5">--{{ token }}</p>
  </div>
</template>
