import {type FunctionComponent, useContext} from 'react'
import type {IArtifact} from '@/models/IArtifact.ts'
import {LanguageContext} from '@/context/languageProvider.tsx'
import {AnvilIcon, MapPinIcon, TrashIcon} from 'lucide-react'
import {useDeleteArtifact} from '@/api/artifactsApi.ts'
import {Link} from 'react-router'

const Artifact: FunctionComponent<IArtifact> = ({
  id,
  imageUrl,
  name,
  era,
  descriptions,
  material,
  origin,
  displayStatus,
}) => {
  const {selectedLanguage} = useContext(LanguageContext)
  const {mutate: deleteArtifact, isPending} = useDeleteArtifact()

  return (
    <Link to={`/artifact/${id}`} className={isPending ? 'artifact delete' : 'artifact'}>
      <img src={imageUrl} alt={name} />

      <div className="status">{displayStatus}</div>

      <div className="metadata">
        <div className="header">
          <div>
            <h3>{name}</h3>
            <p>{era}</p>
          </div>
          <button
            onClick={evt => {
              evt.preventDefault()
              deleteArtifact({id})
            }}>
            <TrashIcon />
          </button>
        </div>
        <p>{descriptions[selectedLanguage]}</p>
        <div className="footer">
          <div>
            <MapPinIcon /> {origin}
          </div>
          <div>
            <AnvilIcon /> {material}
          </div>
        </div>
      </div>
    </Link>
  )
}

export default Artifact
