'use client'

import { useState } from 'react'
import type { ColorShade } from '../constants'

export function ColorSwatch({ color }: { color: ColorShade }) {
  const [copied, setCopied] = useState(false)

  const copyToClipboard = () => {
    navigator.clipboard.writeText(color.value)
    setCopied(true)
    setTimeout(() => setCopied(false), 2000)
  }

  return (
    <button
      onClick={copyToClipboard}
      className="group flex flex-col items-center"
      title={`Klicken zum Kopieren: ${color.value}`}
    >
      <div
        className="w-16 h-16 rounded-xl shadow-sm border border-slate-200 transition-transform group-hover:scale-110 flex items-center justify-center"
        style={{ backgroundColor: color.value }}
      >
        {copied && (
          <svg className={`w-5 h-5 ${color.text === 'light' ? 'text-white' : 'text-slate-900'}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
          </svg>
        )}
      </div>
      <span className="text-xs text-slate-600 mt-1 font-medium">{color.name}</span>
      <span className="text-xs text-slate-400 font-mono">{color.value}</span>
    </button>
  )
}
