'use client';

import { twMerge } from 'tailwind-merge';

import { SkeletonBone } from '@/components/layout/Skeleton';

export type Props = React.HTMLAttributes<HTMLDivElement> & {
  avatarClassName?: string;
  nameClassName?: string;
  contentClassName?: string;
};

const CommentSkeleton: React.FC<Props> = (props) => {
  const {
    className,
    avatarClassName,
    nameClassName,
    contentClassName,
    ...restProps
  } = props;

  return (
    <div
      {...restProps}
      className={twMerge(
        'items flex flex-row items-start gap-2 px-4 py-2',
        className
      )}
    >
      <SkeletonBone
        className={twMerge('h-8 w-8 rounded-full', avatarClassName)}
      />
      <div className='flex flex-1 flex-col gap-2'>
        <SkeletonBone
          className={twMerge(
            'h-3 w-full max-w-[144px] rounded-md',
            nameClassName
          )}
        />
        <SkeletonBone
          className={twMerge(
            'h-3 w-full max-w-[180px] rounded-md',
            contentClassName
          )}
        />
      </div>
    </div>
  );
};

export default CommentSkeleton;