Card

type Stay = {
  id: string;
  name: string;
  photo: string;
  location: string;
  rating: number;
  price: number;
};

export function StayCard({ stay }: { stay: Stay }) {
  return (
    <article className='relative flex h-full flex-col overflow-hidden rounded-xl border bg-background shadow-sm transition-shadow hover:shadow-md'>
      <img
        src={stay.photo}
        alt=''
        className='aspect-16/10 w-full object-cover'
      />
      <div className='flex flex-1 flex-col gap-1 p-4'>
        <h3 className='font-semibold'>
          {/* The ::after layer stretches this link over the whole card. */}
          <a
            href={`/stays/${stay.id}`}
            className='after:absolute after:inset-0'
          >
            {stay.name}
          </a>
        </h3>
        <p className='text-sm text-muted-foreground'>
          {stay.location} · ★ {stay.rating}
        </p>
        {/* mt-auto pins the actions to the bottom when titles wrap. */}
        <div className='mt-auto flex items-center justify-between pt-3'>
          <span className='font-medium'>
            ${stay.price}
            <span className='font-normal text-muted-foreground'> night</span>
          </span>
          {/* relative z-10 lifts the button above the stretched link. */}
          <button
            type='button'
            className='relative z-10 rounded-full bg-primary px-4 py-2 text-sm font-medium text-primary-foreground'
          >
            Book
          </button>
        </div>
      </div>
    </article>
  );
}