import React from 'react';
import { cn, withRef } from '@udecode/cn';

import { useAttachmentState } from '../logic';
import { AttachmentIcon } from './attachment-icon';

export const AttachmentLinkElement = withRef<'div', { pluginkey?: string }>(
  ({ className, children, ...props }, ref) => {
    const { focused, selected, element } = useAttachmentState();
    const { name, fileType } = element;

    return (
      <div
        ref={ref}
        className={cn(
          'inline-block cursor-pointer',
          className,
          'rounded-md bg-[#F2F5FC]',
          focused && selected && 'ring-2 ring-ring ring-offset-1'
        )}
        {...props}
      >
        <figure
          className="flex flex-row items-center gap-1 p-2"
          contentEditable={false}
        >
          <AttachmentIcon type={fileType} />
          <div>{name}</div>
        </figure>
        {children}
      </div>
    );
  }
);
