import { useStore } from '@nanostores/react';
import { workspaceStore } from '~/lib/stores/workspace';

interface ArtifactProps {
  messageId: string;
  onClick?: () => void;
}

export function Artifact({ messageId, onClick }: ArtifactProps) {
  const artifacts = useStore(workspaceStore.artifacts);

  const artifact = artifacts[messageId];

  return (
    <button className="flex border rounded-lg overflow-hidden items-stretch bg-gray-50/25 w-full" onClick={onClick}>
      <div className="border-r flex items-center px-6 bg-gray-50">
        {!artifact?.closed ? (
          <div className="i-svg-spinners:90-ring-with-bg scale-130"></div>
        ) : (
          <div className="i-ph:code-bold scale-130 text-gray-600"></div>
        )}
      </div>
      <div className="flex flex-col items-center px-4 p-2.5">
        <div className="text-left w-full">{artifact?.title}</div>
        <small className="w-full text-left">Click to open code</small>
      </div>
    </button>
  );
}