/* eslint-disable  @typescript-eslint/no-explicit-any */

import styled from 'styled-components/macro'

import { useLexicsStore } from 'features/LexicsStore'

export type ObjectWithName = {
  [key: string]: any,
  name_eng?: string,
  name_rus?: string,
}

type Props = {
  className?: string,
  id?: string,
  nameObj: ObjectWithName,
  prefix?: string,
}

export const NameStyled = styled.span``

type Args = {
  nameObj: ObjectWithName,
  prefix?: string,
  suffix: string,
}

export const getName = ({
  nameObj,
  prefix = 'name_',
  suffix,
}: Args): string => nameObj?.[`${prefix}${suffix}`]

export const useName = (
  nameObj: ObjectWithName,
  prefix?: string,
): string => {
  const { suffix } = useLexicsStore()
  return getName({
    nameObj,
    prefix,
    suffix,
  })
}

export const Name = ({
  className,
  id,
  nameObj,
  prefix,
}: Props) => {
  const name = useName(nameObj, prefix)
  return (
    <NameStyled
      id={id}
      className={className}
    >
      {name}
    </NameStyled>
  )
}
