import { Avatar } from "mogora-ui";

export default function CardDemo() {
  return (
    <Card>
      <Card.Picture
        src="https://i.pinimg.com/474x/d5/c1/13/d5c113254075c85d44d44496b4c44c40.jpg"
        className="h-64 object-cover"
      />
      <Card.Content>
        <div className="flex justify-between items-center">
          <Card.Title>Biggest enterprise</Card.Title>
          <Popover>
            <Popover.Trigger>
              <button className="hover:bg-gray-300 p-1 rounded-md">
                <EllipsisVertical size={20} />
              </button>
            </Popover.Trigger>
            <Popover.Content className="w-32">
              <button className="hover:bg-gray-200 rounded-md w-full py-1">
                Edit
              </button>
              <button className="hover:bg-gray-200 rounded-md w-full py-1">
                Delete
              </button>
              <button className="hover:bg-gray-200 rounded-md w-full py-1">
                Report
              </button>
            </Popover.Content>
          </Popover>
        </div>
        <Card.Description>
          Here are the biggest enterprise technology acquisitions of 2021
          so far, in reverse chronological order.
        </Card.Description>
      </Card.Content>
    </Card>
  )
}