export function NewsMainCardSketelon() {
  return (
    <div
      aria-hidden
      className="animate-pulse overflow-hidden rounded-2xl border border-zinc-200"
    >
      {/* image */}
      <div className="aspect-[21/9] w-full bg-zinc-200" />
      {/* body */}
      <div className="space-y-3 p-4">
        <div className="h-5 w-28 rounded bg-zinc-200" /> {/* chip/date row */}
        <div className="h-6 w-4/5 rounded bg-zinc-200" /> {/* title */}
        <div className="h-4 w-full rounded bg-zinc-200" /> {/* desc line 1 */}
        <div className="h-4 w-11/12 rounded bg-zinc-200" /> {/* desc line 2 */}
        <div className="h-4 w-2/3 rounded bg-zinc-200" /> {/* desc line 3 */}
        <div className="mt-2 h-5 w-40 rounded bg-zinc-200" />
        {/* link */}
      </div>
    </div>
  );
}

export function NewsSecondaryCardSkeleton() {
  return (
    <div
      aria-hidden
      className="animate-pulse overflow-hidden rounded-2xl border border-zinc-200 p-4"
    >
      <div className="h-5 w-24 rounded bg-zinc-200" /> {/* chip */}
      <div className="mt-3 h-5 w-3/4 rounded bg-zinc-200" /> {/* title 1 */}
      <div className="mt-2 h-5 w-5/6 rounded bg-zinc-200" /> {/* title 2 */}
      <div className="mt-3 h-4 w-full rounded bg-zinc-200" />
      {/* desc 1 */}
      <div className="mt-2 h-4 w-10/12 rounded bg-zinc-200" />
      {/* desc 2 */}
      <div className="mt-4 h-5 w-36 rounded bg-zinc-200" /> {/* link */}
    </div>
  );
}
