'use client';

import { Music } from 'lucide-react';

type Props = { size: number };

export function CoverPlaceholder({ size }: Props) {
  const inset = Math.max(4, Math.round(size * 0.14));
  const iconSize = Math.round(size * 0.4);
  return (
    <div
      className="relative grid place-items-center rounded-md bg-muted"
      style={{ width: size, height: size }}
      aria-hidden="true"
    >
      <span
        className="absolute rounded-sm bg-muted-foreground/10"
        style={{ inset }}
      />
      <Music
        className="relative text-muted-foreground"
        style={{ width: iconSize, height: iconSize }}
        strokeWidth={1.5}
      />
    </div>
  );
}