frontend/src/registry/ProfileCard.tsx

"use client";

import { Sparkles } from "lucide-react";

interface ProfileCardProps {
  displayName: string;
  isNew?: boolean;
}

export function ProfileCard({ displayName, isNew = false }: ProfileCardProps) {
  return (
    <div
      className={`
        relative overflow-hidden rounded-2xl p-5
        bg-gradient-to-br from-surface-elevated/90 to-surface-subtle/95
        border border-cta/20
        shadow-[0_4px_24px_rgba(0,0,0,0.4),inset_0_1px_0_rgba(255,255,255,0.05)]
        ${isNew ? "animate-in slide-in-from-bottom-4 fade-in duration-500" : ""}
      `}
    >
      {/* Decorative corner glow */}
      <div className="absolute -top-10 -right-10 w-32 h-32 bg-cta/10 rounded-full blur-2xl" />
      
      {/* Content */}
      <div className="relative flex items-center gap-4">
        {/* Avatar - Reachy Mini profile pic */}
        <div
          className="w-14 h-14 rounded-2xl overflow-hidden
                     border border-cta/30 shadow-lg"
        >
          <img
            src="/reachy-mini-profile-pic.svg"
            alt="Reachy Mini"
            className="w-full h-full object-cover"
            style={{ imageRendering: '-webkit-optimize-contrast' }}
          />
        </div>
        
        {/* Greeting */}
        <div className="flex-1">
          <div className="flex items-center gap-2 mb-1">
            <Sparkles className="w-3.5 h-3.5 text-accent-cyan" />
            <span className="text-[10px] text-accent-cyan font-bold uppercase tracking-widest">
              Welcome
            </span>
          </div>
          <h3 className="text-xl font-bold text-primary tracking-tight">
            Hello, {displayName}!
          </h3>
          <p className="text-xs text-muted mt-1">
            Nice to meet you. Let&apos;s get you set up.
          </p>
        </div>
      </div>
      
      {/* Bottom accent */}
      <div className="absolute bottom-0 left-[10%] right-[10%] h-0.5 bg-gradient-to-r from-transparent via-cta/40 to-transparent" />
    </div>
  );
}