'use client';
import { useEffect, useRef } from 'react';
import { usePreon } from '@/hooks/usePreon';
export function Preon2DCanvas({ address }: { address?: string }) {
const canvasRef = useRef<HTMLCanvasElement>(null);
const { traits, hasPreon } = usePreon(address);
useEffect(() => {
if (!hasPreon || !traits || !canvasRef.current) return;
const canvas = canvasRef.current;
const ctx = canvas.getContext('2d')!;
// Clear
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw aura (color from trustHue)
const hue = (traits.trustHue / 255) * 360;
const gradient = ctx.createRadialGradient(150, 150, 0, 150, 150, 150);
gradient.addColorStop(0, `hsla(${hue}, 100%, 50%, 0.8)`);
gradient.addColorStop(1, `hsla(${hue}, 100%, 50%, 0)`);
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 300, 300);
// Draw shape (species-based)
ctx.fillStyle = `hsl(${hue}, 80%, 60%)`;
ctx.beginPath();
if (traits.species === 1) {
// Wolf - triangle
ctx.moveTo(150, 50);
ctx.lineTo(50, 250);
ctx.lineTo(250, 250);
} else if (traits.species === 2) {
// Owl - circle
ctx.arc(150, 150, 80, 0, Math.PI * 2);
} else {
// Shark - diamond
ctx.moveTo(150, 50);
ctx.lineTo(250, 150);
ctx.lineTo(150, 250);
ctx.lineTo(50, 150);
}
ctx.closePath();
ctx.fill();
// Add texture overlay
const textures = ['Clay', 'Stone', 'Metal', 'Crystal'];
ctx.fillStyle = 'white';
ctx.font = 'bold 16px monospace';
ctx.textAlign = 'center';
ctx.fillText(textures[traits.texture], 150, 290);
}, [traits, hasPreon]);
if (!hasPreon) return null;
return <canvas ref={canvasRef} width={300} height={300} className="rounded-lg" />;
}
