import { IconButton } from '@/components/ui/button'
import { Tag } from '@/components/ui/tag'
import { cn } from '@/lib/utils'
import { HeartbeatLevelDictOutput } from '@/services/im'
import Image from 'next/image'

const HeartList = ({ datas }: { datas: HeartbeatLevelDictOutput[] | undefined }) => {
  return (
    <div className="mt-6 grid grid-cols-2 gap-4">
      {datas?.map((item) => (
        <div key={item.code}>
          <div className="bg-surface-element-normal relative aspect-[41/30] overflow-hidden rounded-lg">
            <Image src={item.imgUrl || ''} alt={item.name || ''} fill className="object-cover" />
            <div className="txt-numMonotype-xs text-txt-secondary-normal absolute bottom-2 left-3">
              {`${item.startVal}℃`}
            </div>
            {!item.isUnlock && (
              <Tag size="small" variant="dark" className="absolute top-2 right-2">
                <i className="iconfont icon-private-border !text-[12px]" />
              </Tag>
            )}
          </div>
          <div
            className={cn(
              'txt-label-m mt-2 text-center',
              !item.isUnlock && 'text-txt-secondary-normal'
            )}
          >
            {item.name}
          </div>
        </div>
      ))}
    </div>
  )
}

export default HeartList
