import AnimationTextHead from '@/app/component/AnimationTextHead'
import UnderlineLG from '@/components/icons/UnderlineLG'
import React from 'react'
import Item from './Item'

function RelatedContent({ data }) {
  return (
    <div className='p-[16px] bg-[#FFF] rounded-[8px] shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]'>
      <AnimationTextHead name='fade-up' text='مطالب مرتبط'>
        <UnderlineLG />
      </AnimationTextHead>
      <ul className='flex w-fit flex-col justify-start items-start'>
        {data.map(item => (
          <Item
            data={item}
            key={item.id}
          />
        ))}
      </ul>
    </div>
  )
}

export default RelatedContent