'use client';

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

import * as Avatar from '@/components/ui/avatar';
import * as CompactButton from '@/components/ui/compact-button';
import { StarRating } from '@/components/ui/svg-rating-icons';

export default function UserRatingCard() {
  return (
    <div className='bg-bg-white-0 flex w-full max-w-[380px] items-center gap-4 rounded-2xl p-4'>
      <Avatar.Root size='48'>
        <Avatar.Image src='https://alignui.com/images/avatar/illustration/james.png' />
        <Avatar.Indicator position='top'>
          <CustomVerifiedIconSVG />
        </Avatar.Indicator>
      </Avatar.Root>

      <div className='flex-1'>
        <div className='flex items-center gap-1'>
          <div className='text-label-sm text-text-strong-950'>James Brown</div>
          <div className='text-paragraph-xs text-text-soft-400'>
            @jamesbrown
          </div>
        </div>
        <div className='mt-2 flex items-center gap-2'>
          <StarRating rating={4.5} />
          <div className='text-paragraph-sm text-text-strong-950'>(4.5)</div>
        </div>
      </div>

      <CompactButton.Root size='large' variant='ghost'>
        <CompactButton.Icon as={Flag} />
      </CompactButton.Root>
    </div>
  );
}