import { type VariantProps, cva } from 'class-variance-authority';

import { getMediaSource } from '@/utils/get-media-source';
import { cn } from '@/utils/tw-merge';

import { Avatar, AvatarFallback, AvatarImage } from '../common/Avatar';

import type { FindProfileQuery } from '@/graphql/generated/output';

const avatarSizes = cva('', {
  variants: {
    size: {
      sm: 'size-7',
      default: 'size-9',
      lg: 'size-14',
      xl: 'size-32',
    },
  },
  defaultVariants: {
    size: 'default',
  },
});

type ChannelAvatarProps = VariantProps<typeof avatarSizes> & {
  channel: Pick<FindProfileQuery['findProfile'], 'avatar' | 'name'>;
  isLive?: boolean;
};

export const ChannelAvatar = ({ size, channel, isLive }: ChannelAvatarProps) => (
  <div className="relative">
    <Avatar
      className={cn(
        avatarSizes({ size }),
        isLive && 'ring-2 ring-rose-500',
      )}
    >
      {channel.avatar
        ? (
          <AvatarImage
            className="object-cover"
            src={getMediaSource(channel.avatar)}
          />
        )
        : null}

      <AvatarFallback
        className={cn(
          size === 'xl' && 'text-4xl',
          size === 'lg' && 'text-2xl',
        )}
      >
        {channel.name[0]}
      </AvatarFallback>
    </Avatar>
  </div>
);