import type { FC } from 'react';
import React from 'react';
import { Tag } from '@theorchard/suite-components';
import { EMPTY_CHAR } from 'src/constants';
import type {
    TrackAudioAttributes,
    TrackRightsAttributes,
} from 'src/data/queries/product/types';
import type { ProductField } from 'src/product/fields/field';

interface Props {
    attributes: ProductField<TrackAudioAttributes | TrackRightsAttributes>;
}

const CLASS_NAME = 'ProductTrackAttributes';

const ProductTrackAttributes: FC<Props> = ({ attributes }) => {
    const attributesToUse = attributes.get();
    return (
        <div className={`${CLASS_NAME}-wrapper`}>
            {Array.isArray(attributesToUse) && attributesToUse.length ? (
                attributesToUse.map(val => (
                    <div key={val.attribute.id}>
                        <Tag
                            text={val.attribute.description}
                            className={`${CLASS_NAME}-tag`}
                        />
                    </div>
                ))
            ) : (
                <Tag text={EMPTY_CHAR} className={`${CLASS_NAME}-tag`} />
            )}
        </div>
    );
};

export default ProductTrackAttributes;