import React from 'react';

interface ProfileCreatedProps {
  email: string;
}

/**
 * ProfileCreated widget displays a success message when a user profile is created.
 * Shows the email with an avatar containing the first letter of the email.
 */
export function ProfileCreated({ email }: ProfileCreatedProps) {
  // Extract first letter of email in uppercase
  const avatarLetter = email.charAt(0).toUpperCase();

  return (
    <div className="flex items-center gap-5 rounded-2xl border-2 border-blue-200 bg-gradient-to-r from-blue-50 to-indigo-50 p-[18px] w-full">
      {/* Profile section with avatar and email */}
      <div className="flex items-start gap-3 flex-1 min-w-0">
        {/* Avatar with first letter */}
        <div className="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-blue-500 to-blue-900 shadow-[0_2px_4px_0_rgba(0,0,0,0.1),0_4px_6px_0_rgba(0,0,0,0.1)]">
          <span className="text-center font-inter text-xl font-bold leading-7 text-white">
            {avatarLetter}
          </span>
        </div>

        {/* Email and success message */}
        <div className="flex flex-col items-start min-w-0 flex-1">
          <p className="font-inter text-lg font-semibold leading-7 text-[#333333] break-words w-full">
            {email}
          </p>
          <p className="font-inter text-sm font-medium leading-5 text-blue-600 break-words w-full">
            Profile created successfully
          </p>
        </div>
      </div>

      {/* Success checkmark icon */}
      <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center p-2">
        <div className="h-4 w-4 flex-shrink-0">
          <svg
            width="16"
            height="16"
            viewBox="0 0 16 16"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path d="M16 16H0V0H16V16Z" stroke="#E5E7EB" />
            <path
              d="M15.4222 2.32959C15.8616 2.76904 15.8616 3.48271 15.4222 3.92217L6.42217 12.9222C5.98272 13.3616 5.26904 13.3616 4.82959 12.9222L0.32959 8.42217C-0.109863 7.98272 -0.109863 7.26904 0.32959 6.82959C0.769043 6.39014 1.48271 6.39014 1.92217 6.82959L5.62764 10.5315L13.8331 2.32959C14.2726 1.89014 14.9862 1.89014 15.4257 2.32959H15.4222Z"
              fill="#22C55F"
            />
          </svg>
        </div>
      </div>
    </div>
  );
}