'use client';

import { AlignVerifiedBadgeIcon as CustomVerifiedIconSVG } from '@/components/misc/alignui-icons';
import * as React from 'react';
import { Share2 } from 'lucide-react';

import * as Avatar from '@/components/ui/avatar';
import * as Button from '@/components/ui/button';

export default function SupportThanksCard() {
  return (
    <div className='rounded-20 bg-bg-white-0 shadow-regular-md flex w-full max-w-[400px] flex-col items-center gap-4 p-2.5 pt-6'>
      <Avatar.Root size='64' color='gray'>
        <Avatar.Image src='https://alignui.com/images/avatar/illustration/james.png' />
        <Avatar.Indicator position='top'>
          <CustomVerifiedIconSVG />
        </Avatar.Indicator>
      </Avatar.Root>

      <div className='text-center'>
        <div className='text-label-lg text-text-strong-950'>
          Thanks for the supporting Wei Chen!
        </div>
        <div className='text-paragraph-sm text-text-sub-600 mt-1'>
          Your contribution means a lot to us.
        </div>
      </div>

      <div className='bg-bg-weak-50 flex w-full flex-col items-center gap-4 rounded-xl p-5'>
        <div className='text-center'>
          <div className='text-label-md text-text-strong-950'>
            Do you want to share your support?
          </div>
          <div className='text-paragraph-sm text-text-sub-600 mt-1'>
            Click the button below to give them a shoutout and share their work
            with others.
          </div>
        </div>
        <Button.Root variant='neutral' size='small'>
          <Button.Icon as={Share2} />
          Share
        </Button.Root>
      </div>
    </div>
  );
}