import ComponentCard from "../../../components/common/ComponentCard";
import PageMeta from "../../../components/common/PageMeta";
import {
  Card,
  CardTitle,
  CardDescription,
  CardAction,
  CardIcon,
} from "../../../components/ui/card/Card";

export default function Cards() {
  return (
    <>
      <PageMeta
        title="React.js Cards Dashboard | TailAdmin - React.js Admin Dashboard Template"
        description="This is React.js Cards Dashboard page for TailAdmin - React.js Tailwind CSS Admin Dashboard Template"
      />
      <div className="space-y-5 sm:space-y-6">
        <ComponentCard title="Basic Card">
          <Card>
            <CardTitle>Card Title</CardTitle>
            <CardDescription>
              This is a basic card with title and description.
            </CardDescription>
          </Card>
        </ComponentCard>

        <ComponentCard title="Card with Icon">
          <Card>
            <CardIcon>
              <svg
                className="w-6 h-6"
                fill="currentColor"
                viewBox="0 0 20 20"
              >
                <path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z" />
                <path
                  fillRule="evenodd"
                  d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z"
                  clipRule="evenodd"
                />
              </svg>
            </CardIcon>
            <CardTitle>Card with Icon</CardTitle>
            <CardDescription>This card includes an icon at the top.</CardDescription>
            <CardAction>Learn More</CardAction>
          </Card>
        </ComponentCard>

        <ComponentCard title="Card with Image">
          <Card>
            <img
              src="https://via.placeholder.com/400x200"
              alt="Card"
              className="w-full h-48 object-cover rounded-t-xl"
            />
            <CardTitle>Card with Image</CardTitle>
            <CardDescription>
              This card includes an image at the top.
            </CardDescription>
          </Card>
        </ComponentCard>
      </div>
    </>
  );
}

