import { Paperclip } from 'lucide-react';
const FileBox = ({ url }: { url: string }) => {
  const fileNameWithSuffix = url.split('/').pop();
  const fullFileName = fileNameWithSuffix?.replace(/-\d+$/, '');
  const filename = fullFileName?.slice(0, 25) + '...';

  return (
    <div className="flex items-center bg-gray-800 border border-gray-700 rounded-lg p-3 max-w-xs shadow-sm">
      <div className="flex items-center space-x-3">
        <Paperclip className="text-white w-6 h-6" />
        <div className="flex-1">
          <a
            href={url}
            className="text-sm hover:underline overflow-hidden text-ellipsis whitespace-normal"
          >
            {filename}
          </a>
        </div>
      </div>
    </div>
  );
};
export default FileBox;
